Sass学习笔记
什么是Sass
Sass是css预处理器的其中一种，作为一种css的开发工具，提供了许多便利写法，使得css开发变得简单和可维护，节省了开发时间。
Sass与css
Sass弥补了css无法完成定义变量，嵌套，继承等工作的缺点，让css像其他程序语言一样具有逻辑功能，写css时不再写重复代码。
Sass与scss
sass有两种语法规则：一种叫sass，不使用大括号和分号，而使用缩进来指定代码块，文件后缀.sass；另一种就是scss，这种和我们平时写的css文件格式差不多，使用大括号和分号，原来css的语法也适用于scss。
基本用法
·变量
Sass允许使用变量，所有的变量以$开头
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
由此引出关于变量的三个问题：
1、变量的作用域问题：
1）
进行编译后输出（无视注释）：
2）
编译后输出：
因此，sass中的变量是随着执行覆盖和调用，如果调用前面没有声明的变量，就报错，如果有不止一个声明的变量，就调用离它上面最近的变量值。
2、默认变量
1）使用默认变量仅需要在值得后面加上!default ：
编译后输出：
2）可以根据需求进行覆盖，在声明默认变量之前重新声明。
编译后输出：
sass编译css是从上到下的，后面会覆盖前面的，而第二段代码由于有了!default，打破了这个规则，使用了前面定义的2。
!default的作用：
假设变量申明带有!default，那么如果在此申明之前没有这个变量的申明，则用这个值，反之如果之前有申明，则用申明的值。
3、全局变量
在变量值后面加上!global即为全局变量。
编译后：
这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于 $color变量，设置了 !global。
通过编译后的css可以看到 font-size取值不同，而 color取值相同。
默认在选择器里面的变量为局部变量，而只有设置了 !global之后才会成为全局变量。
4、多值变量
多值变量分为list类型和map类型，简单来说
·list类型有点像js中的数组
·map类型有点像js中的对象
1）list类型
list数据可通过空格，逗号或小括号分隔多个值，可用 nth($var,$index)取值。
编译后：
2）map类型
map数据以key和value成对出现，其中value又可以是list。格式为： $map: (key1: value1, key2: value2, key3: value3)。可通过map-get($map,$key)取值。
编译后：
·计算功能
Sass允许在代码中使用算式。
变量的操作：
1、 ==, !=
支持所有的类型
2、 <, >, <=, >=
只支持Number类型
3、+, -, *, /, %
进行计算的时候最好用空格进行隔开,例如减号如果不隔开,会把两个变量当成一个变量来处理。
·嵌套
1）Sass允许选择器嵌套，在一个选择器中嵌套另一个选择器来实现继承。
也可以写成：
2）属性也可以嵌套，比如border-color属性，可以写成：
注意，border后面必须加上冒号。
3）在嵌套的代码块内，可以使用&引用父元素。
编译后：
·@at-root的作用是跳出嵌套。
1）跳出单个选择器
编译后：
2）跳出多个选择器
编译后：
默认 @at-root只会跳出选择器嵌套，而不能跳出 @media或 @support，如果要跳出这两种，则需使用 @at-root (without: media)，@at-root (without: support)。
这个语法的关键词有四个：
all（表示所有）
rule（表示常规css）
media（表示media）
support（表示support，因为 @support目前还无法广泛使用，所以在此不表）。
我们默认的 @at-root其实就是 @at-root (without:rule)。
·注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
代码的重用
·继承
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明
1）现有class1：
class2要继承class1，就要使用@extend命令：
编译后：
2）占位选择器以%标识定义，通过 @extend调用。
编译后：
上面的第二段代码，定义了两个占位选择器 %class1和 %class2，其中 %class2没有被调用，所以解析出来的css样式也就没有class2部分。
占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
占位选择器 %的优势：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。
·Mixin
Minxin有点像C语言的宏，是可重用的代码块。
1） 无参数mixin
使用@mixin命令，定义一个代码块。
使用@include命令，调用这个mixin
编译后：
2）有参数mixin
mixin的强大之处，在于可以指定参数和缺省值。
使用的时候，根据需要加入参数
编译后：
3）多个参数mixin
下面是一个mixin的实例，用来生成浏览器前缀。
使用的时候可以像下面这样调用：
编译后：
若@include传入参数的个数小于 @mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。
· @mixin通过 @include调用后解析出来的样式是以拷贝形式存在的。
· @extend实现的继承则是以联合声明的方式存在的。
因此从3.2.0版本以后，建议传递参数的用 @mixin，而非传递参数类的使用继承的占位选择器 %。
·插入文件
@import命令，用来插入外部文件
sass的导入( @import)规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。
但是如果在sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名 .scss。
将被导入的sass文件a.scss：
需要导入样式的sass文件b.scss：
转译出来的b.css样式：
高级语法
·条件语句
1、@if可以用来判断：
2、配套的还有@else-if @else命令：
编译后：
3、三目判断
·循环语句
1）Sass支持for循环。
2）也支持while循环：
3）@each命令，遍历循环:
·自定义函数
Sass允许用户编写自己的函数。使用@function和@return命令：
编译后;
