预处理器
CSS预处理器可以理解为：开发一种特殊的编程语言，把css文件作为编译后的结果，我们在这个编程语言上增加了很多程序的特性，使得开发变得更加简单。
当前流行的css预处理器语言有：
1. Sass(SCSS)
2. LESS
3. Stylus
Sass的定义
Sass是采用Ruby语言编写的一款CSS预处理器语言，也是最早的CSS预处理器语言，有着强大的功能，并且书写样式与原生的CSS极为类似。
Sass的安装步骤
1. 打开Ruby的官网，选择对应的操作系统进行点击链接
2. 点击Downloads
3. 选择相应的版本进行下载以及安装
4. 安装好后打开CMD命令工具
5.输入ruby ,未报错即安装成功。
6. 在cmd中输入安装sass的命令
gem install sass
7. 检查sass版本
sass -v
8. 更新sass
gem update sass
gem: Ruby环境下的包管理器，类似于Node环境下的npm一样。
Sass的编译
sass <要编译的Sass文件路径>/style.scss：<要输出css文件的路径>/style.css
在指定目录下出现了一个main.css的文件，和一个main.css.map的文件
main.css就是编译后的结果
main.css.map是记录编译，用于调试
Sass的变量
声明变量：使用美元符号“ $ ” 符号开头
Sass中的变量
$width : 300px;
变量声明符后面紧跟变量名称 : 变量值；
1. Sass的普通变量
定义之后可以在全局范围内使用
$fontSize: 12px;
body {
font-size: $fontSize;
}
2. Sass的默认变量
sass的默认变量仅需要在值后面加上 !default 即可。
sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式很简单，只需要在默认变量之前重新声明下变量即可。
$baseLineHeight: 1.5 !default;
body {
line-height: $baseLineHeight;
}
3.sass变量的计算
在sass中声明了变量之后，就可以在需要的地方调用变量，变量也可以参与各种计算之中。
注：变量和操作符之间用一个空格隔开，不然会报错。
$baseLineHeight: 2;
$baseColor: red;
body {
line-height: $baseLineHeight - 0.5;
}
h1 {
color : $baseColor ;
}
4.sass中的全局变量和局部变量
全局变量和局部变量是一个作用域方面的技术点，其核心理念是可以访问到这个变量的范围。
编译后 =>
5.sass变量的作用域的理解
只能是子级用父级的，而不能是子级用其他子级的或者父级用子级的
Sass的嵌套
分为三类：1. 选择器嵌套 2. 属性嵌套 3. 伪类嵌套
选择器嵌套
Sass中提供了选择器嵌套的功能，但这并不意味着在Sass中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的CSS代码的选择器的层级越深。
等价于 =>
样式名嵌套（也称为：属性嵌套）
Sass中的属性嵌套，CSS有一些属性前缀相同，只是后缀不一样，比如：border-top和border-right
注： 在嵌套的样式名的后面一定要加上一个 ：号
等价于 =>
伪类嵌套
伪类嵌套需要借助`&`符号一起配合使用
当把 & 符号直接置于嵌套的选择器的首部时，那么效果就是直接将父选择器替换掉这个&符号
等价于 =>
Sass中的混合宏的使用与理解
在很多项目中，多个选择器最终使用的样式其实都是一些常用的，比如width，float等，仅仅只是参数有些许的不同，但是我们还是不得不全部都写一遍，这给开发工作造成了很大时间上的浪费。
因此，在Sass中创造了混合宏的概念，简单的理解为：可以复用的代码块
混合宏的参数之单参数
如果混合宏的效果仅仅只是复用一个代码块的话，那么本质上和并列选择器没有什么很大的区别，混合宏更强大的功能在于是可以为代码块中的各个样式的值设定为变量，然后通过在调用宏的时候传入这个参数，这样只需要改变一些基本参数，便可实现。
混合宏的参数之多参数
可复用的代码来说不止一个，当遇到大块的重复代码的时候，可以考虑传入多个参数，多个参数会按照新婚如的顺序一一对应。
Sass的拓展和继承
拓展就是在一个选择器的样式末尾，补充一个@extend，使得该选择器可以应用到另外一个css规则上。
编译后的css代码
SASS中的占位符
如果只是用拓展和继承的话，那么初始代码一定会被编译出来，但是对于某些预备的代码块，可能在某个项目中不一定会用的到，但是后期又有可能用的到，因此在使用到的时候，就编译，使用不到的时候就不编译出来。
编译后的CSS代码为
Sass中的插值
插值提供了一个类似于js的拼接的功能，使在开发css的时候变得更加简单容易。
类名也可以进行拼接
Sass的数据类型
Sass和js语言类似，也具有自己的数据类型，包括：
1. 数字：如：1、2、10px;
2. 字符串：有引号字符串或无引号字符串，如："foo" 、'bar'、baz
3. 颜色：如：blue、#04a3f9、rgba(255,0,0,0.5);
4. 布尔型：如：null
5. 空值：如：null
6. 值列表：用空格或者逗号分开，如：1.5em 1em 0 2em、
Sass的运算符
加减运算是sass中运算中的一种，在变量或属性中都可以做加法运算。
.box {
width: 20px + 8px;
}
注：单位不同会报错。
Sass中的乘法运算也能支持多种单位，但当一个单位同时声明两个值时会有问题；Sass的乘法运算和加减法一样，在运算有不同类型的单位时，也将会报错。
.box {
width: 10px * 2;
}
对于除法规则，Sass的乘法运算规则也适用于除法规则，不过除法规则还有一个特殊之处，众所周知，“/”符号在CSS中已作为一种符号使用，因此在Sass中做除法运算时，使用“/”符号将不会生效，编译时既得不到需要的值，也会出现报错。
.box {
width: ( 100px / 2 );
}
Sass的高级运算
颜色计算： 所有算数运算都支持颜色值，并且是分段运算的，也就是说，红、绿、和蓝各颜色分段单独进行运算。
p {
color: #010203 + #040506;
}
color: #050709;
