下图是前端CSS预处理语言截止到2017/3/18在GitHub上的星星数，虽然SCSS不是最多的，但是它一定是最丰富的预处理语言，后续将继续分享其他预处理语言。
一、下载及安装
方式一：先下载ruby，然后基于ruby安装sass，webstrom绑定监听即可。
方式二：先下载node.js，然后下载gulp/grunt，最后安装SCSS，这个不用webstrom绑定监听。
二、实用语法
首先要说一下，SASS和SCSS是一样的，只是SCSS是SASS的3.0引入的语法而已。
1.嵌套 (合理嵌套，从祖先元素到当前元素的层层嵌套，可能导致文件体积及复杂度剧增)
PS：支持“&”父元素选择器嵌套，支持属性嵌套；@at-root3.3.0推出的新功能，跳出嵌套。
2.变量----使用“$”定义
a. SCSS支持变量作用域和字符串中嵌套变量，具体说明看下图：
b.变量作用域
局部变量只能在“{}”内部有效，！global可以将局部变量转换成全局变量（sass3.2.0推出功能）；若定义变量为默认值，在其后加上“!default”
PS:一般变量使用“$”，字符串嵌套变量使用#｛｝。
3.混合(Mixin)
使用很简单，使用@mixin定义，@include引用。
a.混合的初级应用----定义和调用
b.混合的中级应用----变量初始化及赋值
c.混合的高级应用----无参及多参数
4.继承----使用“@extend”
一般继承class，编译以后，css中该class也会出现，如果你不想让公共的class在css中出现，可以使用“%”占位符选择器。
5.函数及运算
这里以颜色函数及@each为例，其他很多函数自己可以去看看官网，不然一篇文根本写不完。
a.将颜色变深变浅，颜色加减等。
b. @each
这个函数很不错，可以让你对多个背景图一次书写完成，但是需要注意的是对应class的名字要取的和“in”后面的数组一致，且顺序不能乱。
6.注释、@import、编译风格
a.注释
/* */css中显示，//css中不显示，/*重要注释!*/压缩不会被删掉。
b. @import
该标签可引入sass、scss、css文件，如果将一个scss另一个又不想立马被编译成css的话，可写成
@import “_mixin.scss“。
c. 4种编译风格
*nested：嵌套缩进的css代码，它是默认值。
*expanded：没有缩进的、扩展的css代码。
*compact：简洁格式的css代码。
*compressed：压缩后的css代码。
命令行：
sass --style compressed test.sass test.css
三、我是怎么在项目中使用SASS的
1.适当CSS RESET
SASS有reset模块，但是因为我们的项目不是所有的reset样式都用，所以我们一般适当选择一部分reset。（考虑文章问题，将样式都写成了一行，项目中不建议这样写）
2.定义公共变量
根据需要定义使用到的变量，以便引用，公共变量命名需便于理解且不重复。
3.项目中使用部分展示
是不是觉得SASS也不难吧！下篇将和大家一起学习LESS使用。
