初学sass/scss

（0）前言

　　总体来说和less类似

（1）具体使用

　　1.注释

　　　　//包裹的注释不会被编译到css文件中

　　　　/**/包裹的注释会被编译到css文件中

　　　　将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息

　　2.变量：可以使用$去定义变量

　　　　属性值：$color：pink     ---->    backgraund-color:$color    //复用

　　　　非属性值：#{}       $name: foo;     p.#{$name} {  ....  }

　　  变量的延迟加载：会等某个作用的所有变量都声明完成后才会去赋值。

　　3.数据类型

　　　　字符串：$name: 'Tom Bob';

　　　　数字：$my-age: 19;         计算时数字与单位会被当做一个整体计算，例如cm*cm=cm2

　　　　空：$value: null;          不能参加数值计算

　　　　布尔值：$a: true;

　　　　数组：$list2: (1px 2px) (5px 6px);

　　　　映射：$map: (  $key1: value1）

　　　　颜色：$color4: desaturate($color, 15%);    $color5: (green + red);   内置colors函数，颜色叠加等功能

　　4.基础运算

　　　　加：$add2: 1 + 2px; // 3px             

　　　　减：$add3: 1px - 2; // -1px

　　　　乘：$num3: 1px * 2; // 2px                  【作为乘的计算，最多只能有一方携带单位】

　　　　除：                                                        不会四舍五入，精确到小数点后5位

　　　　余：                                                        值与"%"之间必须要有空格，否则会被看做字符串

　　5.关系运算

　　　　比较：返回布尔值true/false

　　　　相等判断：返回布尔值true/false

　　　　运算优先级：()  >   *./. %   >  + . -   >  比较

　　6. 其他：

　　　　hover等嵌套：需要在写:hover前加一个&

　　　　!default：在sass中可以对变量重复赋值，因此为了避免歧义，可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值【变量是 null 空值时将视为未被 !default 赋值。】

　　　　!global：将局部变量提升为全局变量

　　　　!optional：可以在出现问题后不让他编译该部分代码

　　　　引入：在一个sass文件中允许引入另一个sass文件，引入的文件必须是sass文件，@import "foo.scss" /@import "foo";【当然也可以一次引入多个】

　　　　循环：@if/@for/@while/@each

　　　　混合指令：见所写less部分（https://www.cnblogs.com/xhxdcaiji/p/16060228.html）