介绍
Scss是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。
以下为基本语法
一、注释
注释分为单行注释和多行注释，单行注释在.scss文件编译成.css文件时会被删除，多行注释不会被删除，若在多行注释的开头加上感叹号（!），那么在scss的任何模式下都不会被删除，多用于书写版本、开发等信息。
// 这是单行注释
/*
这是多行注释
*/
/*!
另一中多行注释
*/二、变量
1.定义变量以$开头，命名形式与less变量命名形式基本相同，使用方式也基本相同。变量中存在块作用域，如果变量命名相同，优先使用本级作用域下的变量，然后再去向上寻找。
以上代码解析成css为
.box1 {
color: red;
}
.box1 .box2 {
color: green;
}
2.嵌套规则作用域内定义的变量只能在本嵌套规则中使用，如果想要在其他嵌套中使用，需要后缀 !global，将其变成全局变量。
三、数据类型
1.字符串
字符串有三种表示方式，双引号，单引号，或者不带引号。
2.数字
正数，负数，浮点数，正数，带单位的数字（如10px、10cm）都属于数字，
其实以数字开头字母结尾的都可以算作数字。（如10a，100b）
3.空值
null空值，设为空值的变量，使用时不会进行编译。空值主要用来判断。
4.布尔值
false和true，只有null和false是false，其他均是true
5.数组
6.映射（maps）
与JavaScript不同的是用小括号，类比JavaScript的对象{}
7.颜色
SCSS提供了内置Colors函数，从而更方便的使用颜色。
四、运算
1.算术运算符
(1)加法
总结：
数字与数字相加：只要带单位，那么结果就带单位；都不带单位，则结果不带单位。
纯字符串相加：结果是否带双引号，取决于第一个加数是否带双引号。没太大意义
数字与字符串相加：没太大意义
(2)减法
总结：数字与数字之间与加法一样；其他组合没意义。
(3)乘法
总结：数字与数字之间两个都带单位的相乘会报错， 数字与字符串、字符串与字符串相乘都会报错。
(5)除法
总结：除不尽保留五位小数。被除数不带单位，除数带单位会报错。
(6)求余 
总结：求余符号两边要用空格隔开。
2.关系运算符
前提：两端必须为数字，结果是布尔值。
3.相等运算符
4.布尔运算符
and、or、not，使用时两端需要空格。
5.颜色值运算
按照16进制进行运算，如果结果超过临界值，则结果为临界值。
五、一些常用方法
1.插值语法 #{}
2.父选择器 &
与less相同，不多介绍。
3. !default修饰
总结：寻找变量时，默认向上寻找，只要找到此变量就结束；但是如果变量使用了!default修饰，则略过此变量，继续向上寻找，如果找到同名变量（值非空），则使用；如果没有找到（或值为null），则使用!default修饰的变量。
4.!optional
当@extend相关代码语法错误时，加上此修饰，则不会编译错误代码，后面继承会用的到。
六、@的相关指令
1.@import
Scss扩展了@import的功能，允许其导入SCSS或SASS文件，被导入的文件将合并编译到同一css文件中，且被导入的scss/sass文件中所包含的变量或混合指令（mixin）都可以在导入的文件中使用。
以下sass文件中，@import仅作为普通的css语句
1.导入.css文件。
2.文件名以http://开头。
3.文件名是url()
2.@media
Scss中的@media与css中用法一样，只是增加了可以嵌套、插值语法等。
3.@extend
表示继承，但一般用于继承简单的样式（指选择器简单）
当选择器名称较多时，可能会出现意想不到的结果，所以要慎用。（用混合和函数代替较好）
七、控制语句
1.if()三元表达式：用于判断展示对应的样式，不能使用全等或不全等（===或!==）
2.@if、@else if、@else
注意此处与if()不同的是，@if中包含整个属性名和属性值，而if()中只有属性值。
3.@for循环
(1).form ... through...：包含开始和结尾
注意：$a表示数字结果，#{$a}表示转成字符串，属性名需要是字符串。
(2).from...to... ：包含开头不包含结尾
4.@while循环
5.@each循环
1.循环一维数组
2.循环二维数组
3.循环maps
八、混合mixin
1.混合指令可以进行样式的重用，使用@mixin进行定义，@include进行使用。
2.混合指令中可以进行参数的传递，传递方式类似函数传参。传递的方式支持位置传参、关键词传参、默认参数和不定参数。
(1)位置传参（普通传参）
(2)关键词传参（类似对象结构赋值）
(3)默认参数：当不传递参数时，使用默认参数。
(4)不定参数：当参数数量不固定时，可以使用不定参数。
3.向混合样式中导入内容，即可以将scss代码写进@include中，插入@mixin中@content的标记处，这样可以动态插入样式。
九、函数
1.内置函数：涉及索引的函数，索引下标从1开始计算
(1)字符串相关内置函数
| 函数名和参数类型 | 函数作用 |
|---|---|
| quote($string) | 添加引号 |
| unquote($string) | 除去引号 |
| to-lower-case($string) | 变为小写 |
| to-upper-case($string) | 变为大写 |
| str-length($string) | 返回$string的长度(汉字算一个) |
| str-index($string，$substring) | 返回$substring在$string的位置 |
| str-insert($string, $insert, $index) | 在$string的$index处插入$insert |
| str-slice($string, $start-at, $end-at） | 截取$string的$start-at和$end-at之间的字符串 |
(2)数字相关内置函数
| 函数名和参数类型 | 函数作用 |
|---|---|
| percentage($number) | 转换为百分比形式 |
| round($number) | 四舍五入为整数 |
| ceil($number) | 数值向上取整 |
| floor($number) | 数值向下取整 |
| abs($number) | 获取绝对值 |
| min($number...) | 获取最小值 |
| max($number...) | 获取最大值 |
| random($number?:number) | 不传入值：获得0-1的随机数；传入正整数n：获得0-n的随机整数（左开右闭） |
(3)数组相关内置函数
| 函数名和参数类型 | 函数作用 |
|---|---|
| length($list) | 获取数组长度 |
| nth($list, n) | 获取指定下标的元素 |
| set-nth($list, $n, $value) | 向$list的$n处插入$value |
| join($list1, $list2, $separator) | 拼接$list1和list2；$separator为新list的分隔符，默认为auto，可选择comma、space |
| append($list, $val, $separator) | 向$list的末尾添加$val；$separator为新list的分隔符，默认为auto，可选择comma、space |
| index($list, $value) | 返回$value值在$list中的索引值 |
| zip($lists…) | 将几个列表结合成一个多维的列表；要求每个的列表个数值必须是相同的 |
(4)映射（maps）相关内置函数
| 函数名和参数类型 | 函数作用 |
|---|---|
| map-get($map, $key) | 获取$map中$key对应的$value |
| map-merge($map1, $map2) | 合并$map1和$map2，返回一个新$map |
| map-remove($map, $key) | 从$map中删除$key，返回一个新$map |
| map-keys($map) | 返回$map所有的$key |
| map-values($map) | 返回$map所有的$value |
| map-has-key($map, $key) | 判断$map中是否存在$key，返回对应的布尔值 |
| keywords($args) | 返回一个函数的参数，并可以动态修改其值 |
(5)内省函数
| 函数名和参数类型 | 函数作用 |
|---|---|
| type-of($value) | 返回$value的类型 |
| unit($number) | 返回$number的单位 |
| unitless($number) | 判断$number是否带单位，返回对应的布尔值 |
| comparable($number1, $number2) | 判断$number1和$number2是否可以做加、减和合并，返回对应的布尔值 |
2.自定义函数
通过@function进行自定义函数，通过@return定义返回值。可以进行默认传参，位置传参，不定传参、关键字传参，与mixin传参一致。
