前情提要： sass是一个css预处理工具，使开发者在css也可以定义变量，嵌套，继承，进行简单的运算，制定简单的逻辑等等。并且，完全兼容css3。
sass有两种语法，sass和scss。scss的书写更接近于css，scss文件以.scss为扩展名。sass不用大括号和分号来分割代码块和语句，它是通过缩进来表示类与类的嵌套，通过换行来分隔属性，sass文件以.sass为扩展名。本文主要介绍scss语法。
1、导入
在导入时，如果将css文件导入scss文件，不进行编译，无任何特殊处理，如果导入sass文件，将会把所有被导入的scss文件编译入导入的那个文件。通常，被导入的scss文件以_开头，文件的后缀名在导入时可以省略，如“@import ‘_sassFileName.scss’;”可以简写成“@import ‘sassFileName’;”
2、注释
多行注释/**/，单行注释//，需要注意的是，单行注释不会被转译到对应的css文件中，多行注释是会的。
在压缩输出模式下 (compressed)，不会将注释转译到css中，可以将多行注释的第一个字母改为 !，便于添加版权信息。
3、变量
Scss中的变量可以分为几类，普通变量，默认变量，特殊变量，多值变量，全局变量等。
3.1普通变量
普通变量由$标识，后面紧跟变量名称，没有空格符，然后用：分隔，后面加变量值。例如：$white: #ffffff;。使用
3.2默认变量
默认变量即在普通变量的值后面加上！default；例如：！default; 这里需要注意的是，默认变量都是用来设置默认值的，如需更改，进行覆盖即可，在默认变量的声明之前重新声明一次，多用于组件化；在默认变量之后声明就是普通的覆盖。
3.3特殊变量
变量在使用时，当需要变量拼接、作为属性、输出到注释中去或者应用于复杂属性时，需要用#{}包裹一下。实例：
$direction：top;
border-#{$direction}: 20px;
3.4多值变量
多值变量分为list和map型，list类似于数组，map类似于对象。
3.4.1 list
示例：//一维数据 $px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
list的数据可以用空格，逗号，小括号分隔，可以为多维list。list有一系列的函数。
length（$list）返回list的长度
nth($list, $n) 返回第$n个值
set-nth($list, $n, $value) 设置第$n个值
join($list1, $list2, [$separator]) 合并两个list，第三个参数为分隔符，可省略，有两个值comma 或 space，分别表示逗号和空格
append($list1, $val, [$separator]) 在list的最后添加一个值，第三个参数同上
zip($lists…) 合并多个list为一个多维数组，注意规则，以下为示例
zip(1px 1px 3px, solid dashed solid, red green blue)
=> 1px solid red, 1px dashed green, 3px solid blue
index($list, $value) 返回$value在list中的下标，从1开始，没有返回null
list-separator($list) 返回list的分隔符，有两个值comma 或 space，分别表示逗号和空格
3.4.2 map
示例：$box: (height: 200em, 100em, border: 1px solid red);
map由key,value的键值对组成，其中value可以为list。map也有自己的函数
map-get($map, $key) 根据key值返回value
map-merge($map1, $map2) 合并两个map，返回值为map
map-remove($map, $keys…) 根据key值删除相应的键值对，key可以为多个，返回值为map
map-keys($map) 返回map的key，返回值为list
map-values($map) 返回map的value，返回值为list
map-has-key($map, $key) 判断是否含有给出的key,返回值为true或false
keywords($args) 以(arg1: val, arg2: val....)的格式返回（调用此函数的）函数的实参
3.5 全局变量
在sass 3.4之前的版本中，在选择器中声明的变量会覆盖外面全局声明的变量。在sass 3.4后，在值的后面加上！global,就可以声明为全局变量。全局变量既可以声明在选择器内也可以声明在选择器外。推荐声明在外面。示例： padding: 0px; max- 100%; box-sizing: border-box !important; word-wrap: break-word !important; font-family: 宋体; font-size: 14px;"> !global;
4、嵌套
嵌套分为属性嵌套和选择器嵌套，一般属性选择器太乱，所以这里不给具体解释。选择器嵌套指的是在一个选择器中写另一个选择器的样式，实现嵌套关系，是scss结构更清晰。
编译完之后，嵌套的选择器均作为被嵌套选择器的祖先选择器，所以这里不建议嵌套太多层，因为浏览器是从右向左进行编译的，写太多于效率不太好，建议在三层内。
在选择器中，&可以作为父选择器，注意&后不要加空格，一般用于hover等伪类的书写。
5、跳出嵌套@at-root
如需跳出嵌套，需在那个子类前加上@at-root，其实加上的是@at-root（without：rule）,只是因为（without：rule）是默认的所以被省略了，这样是不能跳出@media和@support的，所以需要without其他的属性，all：所有的，media，跳出@media，support，跳出@support，至于默认的rule，就指一般的css规则了。
如需多个选择器一起跳出，只需用{}把多个子类包裹起来，前面统一加上@at-root。
6、@mixin：混合
当一些样式需要重复使用时，可以写在@mixin中，通过@include引用。混合类似于函数，实现一部分代码的重用而不是类似于封装类。混合可以传递参数，而且可以传递多个，用逗号分开。当传入的参数比定义的参数小时，取用默认值，没有默认值则报错。设置默认值只需在参数后面加：值 即可。当一个参数可以有多组值时，在参数后加三个点即可。
这里需要注意的是用混合进行代码复用时是通过复制的方式复用的，并不会通过联合声明（使用并集选择器）的形式。
注释：有的文章将@mixin解释为模块化，但是或许是因为我对模块化了解欠缺，反正我是认为这样解释不那么好的。
7、@extend 继承
@extend后加上自己要被继承的选择器，并且继承是通过联合声明的形式编译样式的。 继承多个选择器时加逗号隔开即可，但是像一些高级选择器，例如交集选择器目前就不能被识别，具体得实践中可以自己试。
8、占位选择器%
占位选择器最基本的用法就是在定义和使用类的时候在类名前用%而不用点，这样如果不被使用的时候它是不会被编译进生成的css文件中的。使用方法是用@extend继承。