一、sass
跟less一样，sass也是一种css预编译语言，由于sass出现的比less晚，因此支持的语法更多，例如循环语句，条件语句等等。sass是通过ruby编译的，因此使用sass要首先安装ruby
安装ruby：
Window 系统下，我们可以使用 RubyInstaller 来安装 Ruby 环境，下载地址为：https://rubyinstaller.org/downloads/ 或者 请点击这里下载。
下载 rubyinstaller 之后，解压到新创建的目录下：
双击 rubyinstaller-2.2.3.exe 文件，启动 Ruby 安装向导。
点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成 Ruby 安装为止。
如果安装没有适当的配置环境变量，则需要进行环境变量的配置。
安装完成，输入gem -v可以查看版本号
sass属于gem的一个模块，我们可以通过gem安装sass：gem isntall sass
安装完成，提供了sass指令，输入sass -v可以查看版本号，也可以手动安装sass，前提需要sass文件：
gem install 将sass文件拖入进来。在开发时，通常写中文注释，但是ruby是日本人开发的，因此编码不涵盖中文字符串，所以要更改字符集：
进入C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass目录，打开engine.rb文件，（这里指的是默认安装路径，自定义安装路径需自己找）
在54行，添加Encoding.default_external = Encoding.find('utf-8') 
二、拓展名
sass支持两种拓展名
一种是.sass
这种拓展名文件，支持的语法比较新，与stylus类似，省略很多符号，通过空格和缩进设置作用域（模块），跟css差距很大，因此很少使用
一种是.scss
这种拓展名文件，支持的语法跟css语法很相似，因此被很多开发者接受
1、命令行编译
安装完成sass，可以通过sass指令来编译代码：
sass scss文件(sass文件) css文件 配置
配置：
-C 避免输出缓存文件
--sourcemap=none 避免输出suorcemap文件
会生成一个css文件
2、工程化编译sass
对webpack来说sass文件也是资源，是资源就可以模块化打包加载
需要安装sass-loader，使用方式跟less一样（npm install sass-loader）
style-loader!css-loader!sass-loader
注意：本地安装sass，sass-loader依赖node-sass，所以也需要安装node-sass（npm install node-sass）
1、嵌套语法与&
编译的时候会在将内外选择器同时保留，
外部选择器类似命名空间，确保选择器名称不会相互覆盖。
嵌套的时候，我们可以通过&符号获取当前选择器
2、属性嵌套
在sass中支持复合属性嵌套定义
复合属性：一个属性可以代表多个属性的属性
margin-top, margin-bottom, marign-right, margin-left
border:
border-width, border-style, border-color，
border-top, border-right, border-bottom, border-left，
border-top-width, border-top-style, border-top-color，
border-right-width, border-right-style, border-right-color，
border-bottom-width, border-bottom-style, border-bottom-color
border-left-width, border-left-style, border-left-color
复合属性定义的语法：
parentProps: { childProps: value; }
编译后：
3、变量
sass支持变量
语法 $key: value;
在less中定义变量是@key:value;
全局的变量，任何模块都能使用
局部的变量，只能在当前模块中使用，模块外部无法使用
不支持声明前置，尽量将变量定义在最前面。
4、运算
数学运算：sass支持加减乘除运算，但是运算是有物理意义的
加减法：运算时候会做单位转换。保留是第一个加数或者被减数的单位
乘法：只能有一个乘数带单位
除法：默认不会执行除法。在css中，font属性的属性值可以是字号比行高，所以/默认不执行除法，想执行除法，必须满足三个条件之一
1 必须有()
2 必须出现变量或者方法的返回值
3 是表达式的一部分（除了除法，还有其它的运算）
单位：10 / 2 10是被除数， 2是除数
如果被除数有单位，除数单位可有可无，有单位单位抵消。
如果被除数没有单位，除数一定不能有单位
在sass中，色彩可以进行运算
必要条件是：色彩的透明度必须一致
运算的时候，每个通道单独运算的，透明度通道不运算
运算过程中，通道之间不会进位或者借位
一个通道的值只能在0-255（00-ff）之间
字符串运算：
sass允许字符串，就是字符串拼接
sass中的混合也是为了复用一组样式
语法：@mixin 混合名称 {
// 定义样式
}
使用混合： @include 混合名称;
特点：
1 混合在编译的时候，删除了，当多次使用混合的时候，并没有合并选择器，是真正的复制。
2 不支持声明前置，外部的混合内部不能使用
所以sass中的混合相当于less中的方法
混合传参
定义参数的语法，跟定义变量的语法是一样的，并且可以传递默认参数
语法：@mixin 混合名称($arg1: val1, $arg2: val2) {
}
使用混合：@include 混合名称(val1, val2);
如果定义了默认参数，使用混合的时候，可以不用传递参数
如果是一个参数都不传递，则可以省略参数集合
如果没有定义默认参数，使用混合的时候，必须传递参数
获取剩余参数
在less中获取所有参数用@argumetns
在sass中获取剩余参数语法跟ES6语法相似，使用三个点语法
sass中，三个点语法在变量之后：@mixin demo($arg1, $arg2, $arg...) {}
arg获取从第三个参数后面所有的参数。前面的参数可以正常使用
兼容浏览器，有时候，通常我们为了将css3样式兼容所有浏览器，而添加浏览器前缀，要书写很多遍。
此时我们可以通过混合复用样式，提高开发效率，通常将混合名称定义成css样式名称，并且在混合中，只设置一个样式
编译后：
6、继承
为了复用选择器的样式，sass提供了继承，跟less中的混合是一样的
less中的方法是sass中的混合
less中的混合是sass中的继承
定义继承就是定义选择器，sass支持四类继承选择器：
类选择器，id选择器，元素名称选择器，自定义元素名称选择器
使用继承：@extend 继承选择器;
特点：
1 继承的选择器在编译的时候会保留
2 编译的时候，合并了选择器，而不是复制样式，相对来说效率更高
如果不想在编译的时候保留选择器样式，我们可以使用选择器占位符%，在选择器前面添加%占位符，此时该选择器在编译的时候会删除
注意：只有元素名称选择器和自定义元素名称选择器可以使用%占位符，id选择器和类选择器无法使用
一旦添加占位符，@extend 继承选择器的时候，也要添加占位符
sass中的继承支持声明前置，所以尽量将他们定义在最前面
局部继承，当前模块可以使用，其他模块可以直接使用，但是有意想不到的结果，所以不建议使用局部的继承
7、插值与引入文件
sass插值语法： #{$key}
跟less一样，sass中的插值有三种用法：
1 在字符串中插值
2 在选择器上插值
3 在属性名称上插值
引入文件有两种方式
css文件引入方式： @import url(url)
sass文件引入方式：@import url
8、条件语句
sass支持if条件语句，语法跟js中的if条件语句类似
js中条件语句 if () {} else {}
sass中条件语句 @if {} @else {}
对比js语法
相同点：
1 关键字（js： if, else if, else。sass: @if, @else if, @else）；
2 条件体：都是通过{}定义；
3 比较运算符：>, <, >=, <=, ==
不同点：
1 js中，条件定义在条件集合()中, sass不需要()。直接写条件；
2 逻辑运算符
js 中 “与”用“&&”表示，“或”用“||”表示
sass 中 “与”用“and”表示， “或”用“or”表示
9、循环语句
跟js中的for循环一样，sass也支持循环语句，也用@for关键字定义，有两种语法
@for $i from start through end {}
@for $i from start to end {}
@for：表示循环语句关键字
$i：表示循环变量
from，through，to：都是循环关键字
start：表示循环的起始值
end：表示循环的终止值 默认每次循环增量都是1
through与to的区别是：
through：最后一次循环包含end值
to：最后一次循环不包括end值
循环语句通过{}定义了代码块，因此循环语句中定义的变量，外部无法使用
还可以利用循环语句实现bootstrap栅格系统：
10、while 循环
在for循环中，增量始终是1，无法改变，如果想自定义循环增量，可以使用while循环
语法：
@while 循环条件 {
定义循环体（定义样式）
}
由于循环变量定义在了循环外部，因此在循环外部可以继续使用循环变量
11、枚举循环
for循环的循环增量是1，while循环中可以自定义循环增量，但是循环增量始终是固定的，如果想循环一个没有规律的聚合数据，可以使用枚举循环
语法：@each $i in 枚举体 {}
@each 枚举循环关键字
$i 是循环变量
in 循环关键字
枚举体：多个个体用逗号隔开
注意：如果枚举的个体命中了sass内置的数据变量，如red，green，blue等，使用的时候，要添加引号
12、三元运算符
在js中，?:是一个三元运算符（是对if语句的简写）
sass提供了if方法，可以实现该功能
if(condition, trueValue, falseValue)
condition值为真，结果是truevalue
condition值为假，结果是falsevalue
