Sass是一个强大的CSS预处理器，可以很方便的复用一些CSS样式，它在CSS语法的基础上增加了变量、嵌套、混合、导入 等高级功能，这些拓展令CSS更加强大与优雅。这允许我们通过变量来定义一些反复使用的CSS属性值，而后通过变量名来引用它们，从而避免了重复书写。

两种语法

SCSS语法

SCSS 语法使用 .scss 文件扩展名。它是CSS的超集，也就是说所有的CSS都是有效的SCSS。

任何一种格式都可以直接用 @import导入到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式。

缩进语法

缩进语法支持与SCSS 语法相同的所有特性，但是它使用缩进语法而不是花括号来描述文档的格式。

举例：

  1. /* SCSS语法 */
  2. @mixin button-base() {
  3.   @include typography(button);
  4.   display: inline-flex;
  5.   &:hover { cursor: pointer; }
  6.   &:disabled {
  7.     color: $mdc-button-disabled-ink-color;
  8.   }
  9. }
  10. /* 缩进语法 */
  11. @mixin button-base() {
  12.   @include typography(button);
  13.   display: inline-flex;
  14.   &:hover
  15.     cursor: pointer
  16.   &:disabled
  17.     color: $mdc-button-disabled-ink-color
  18.     cursor: default
  19.     pointer-events: none

安装与编译

首先要安装Ruby语言的配置环境（参考），然后使用如下命令：

  1. gem install sass
  2. gem install compass

写好的.scss或.sass文件不能直接引入到html中，而需要先对将Sass代码编译成CSS代码。通常人们使用webpack，所以也要安装sass-loader：

  1. npm install sass-loader node-sass webpack --save-dev

回顾：vue-loader是为了将、