css 中的预处理器css 预处理器，在原本 css 语法的基础上扩展了 CSS 的基本功能。css 预处理器让使用 c

css 预处理器，在原本 css 语法的基础上扩展了 CSS 的基本功能。css 预处理器让使用 css 的方式变得更加灵活，不需要考虑浏览器的兼容性问题，并且它支持更加复杂的逻辑语法，比如变量、函数、混合、代码嵌套、继承、CSS 文件模块化（提升复用率）等等

常见的 css 预处理器有：

无论使用哪种 css 预处理器，最终都会被编译成相同的 css。在预处理器中使用变量，就可以在颜色值、图片路径等通用的数据变化时来控制取值。

以 vue 项目为例，需要搭配 sass-loader、node-sass 来使用。

安装：

npm install sass-loader --save-dev
npm install node-sass --sava-dev

注：如果由于安装的版本过高报错时，需要指定一个版本再安装，比如：

npm install sass-loader@7.3.1 --save-dev

Node 版本过高，就需要进行降级，版本对应关系参照如下：

vue.config.js 中添加 scss 的配置：

scss 声明变量时，使用 $ 符号

$mainColor: green;
$fontSize: 24px;
div {
  color: $mainColor;
  font-size: $fontSize;
}

Less 既可以在客户端上运行，也可以在服务端运行（Node.js）。

less 声明变量时，使用 @ 符号：

@mainColor: green;
@fontSize: 24px;
div {
  color: @mainColor;
  font-size: @fontSize;
}

扩展名为.styl，除了标准的 CSS 语法，stylus 也可以不带花括号和分号。

less 声明变量时，可以使用 $ 符号或不使用符号，但不能使用 @ 符号：

mainColor = green
$fontSize = 24px
body
  color mainColor
  font-size fontSize

除了变量之外，嵌套也是非常常用的，三种 css 预处理器的的写法相同：

.a {
  margin: 10px;
  .b {
    height: 100px;
    .c {
      color: red;
      &:hover {
        color:green;
      }
    }
  }
}

其它属性的使用，可以参照官方文档。