SASS

参考文档:

https://wangtunan.github.io/blog/cssPrecompiler/sass

介绍

SASS 是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令CSS更加强大与优雅。

参考文档和链接地址：

安装

你可以使用如下两种方式来学习体验SASS：

在线方式：SASS Playground 提供即时编译结果，适合快速学习。

通过sass的npm包自主编译，适合深入学习(本篇文章采用方式，推荐)。

首先，你需要按照下面命令创建一个新的项目，然后使用npm命令初始化生成package.json文件，如下：

# 创建目录
$ mkdir sass-learn

# 使用默认配置，生成package.json文件
$ npm init -y

执行完以上命令后，代码结构如下所示：

|-- sass-learn
|   |-- package.json

接着，通过编辑器终端安装sass：

# 安装sass
$ npm install sass

# 版本:
"sass": "^1.70.0"

紧接着，在package.json文件中添加两个命令，如下：

// dev为本地开发命令，--watch是监听文件变化，自动编译
// build为正式打包命令，--style为打包风格，compressed为压缩模式，expanded为展开模式
{
  "scripts": {
    "dev": "npx sass index.scss output.css --watch",
    "build": "npx sass index.scss index.css --style=compressed"
  }
}

然后，在项目中创建index.scss，并撰写如下内容：

.box {
  color: red;
}

最后，运行如下命令，进入本地开发模式：

$ npm run dev

此时完整目录结构如下所示：

|-- sass-learn
|   |-- index.scss
|   |-- output.css
|   |-- output.css.map
|   |-- package.json

Scss还是Sass

SASS支持两种不同的语法，分别是文件后缀为.scss和.sass，这两种语法功能一样，只是风格不同。

.scss语法：有括号，有分号

.box {
  button {
    outline: none;
    border: 1px solid #ccc;
  }
}

.sass缩进语法：无括号，无分号，只有缩进和换行

.box
  button
    outline: none
    border: 1px solid #ccc

所以叫scss还是sass其实都一样，具体如何使用根据个人喜好即可。