“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。在众多优秀的 CSS 预处理器语言中属Sass、LESS和Stylus最优秀.
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。
变量声明
Sass 中 用 $符号声明变量,如：
$width：100px;
使用变量，如：
div{ width:$width; }
默认变量
sass 的默认变量仅需要在值后面加上 !default 即可。
$baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; }
编译后的css代码：
body{ line-height:1.5; }
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖方式也很简单，只需要在默认变量之前重新声明下变量即可。
$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; }
编译后的css代码：
body{ line-height:2; }
可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。
Sass 的嵌套分为三种：
- 选择器嵌套
- 属性嵌套
- 伪类嵌套
[Sass]嵌套-选择器嵌套
Sass 中，就可以使用选择器的嵌套来实现：
nav { a { color: red; header & { color:green; } } }
编译为相应的CSS：
nav a { color:red; } header nav a { color:green; }
Sass 属性嵌套
CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。
在 Sass 中我们可以这样写：
.box { border: { top: 1px solid red; bottom: 1px solid green; } }
编译后相应的CSS为：
.box { border-top: 1px solid red; border-bottom: 1px solid green; }
[Sass]嵌套-伪类嵌套
其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用
例如：.
.box{ &:before{ /*伪类嵌套与属性嵌套的区别在与，这里必须加&，不能省略*/ content:"伪元素嵌套"; } }
相应的CSS代码如下：
.box:before{ content:"伪元素嵌套"; }