SASS？
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
sass有两种后缀名文件：
- sass（不使用大括号和分号）---不建议使用
- scss（使用大括号和分号）----普遍使用
导入：
@import "reset.css";
sass有两种注释方式：
- 标准的css注释方式
- //双斜杆形式的单行注释（单行注释不会被转译出来。）
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
scss---->
1. 变量必须是$开头
2. !default-----默认值
默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可
特殊变量一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
多值变量
list类型（通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值）
map类型（以key和value成对出现，其中value又可以是list）
简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
SCSS允许在代码中使用算式：
body { margin: (14px/2); top: 50px + 100px; right: $var * 10%; }
条件语句:
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } }
循环语句:
1. @for $var from <start> through <end>
2. @for $var from <start> to <end>。
PS： $i（变量），start（起始值），end（结束值）
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }