Scss是css的预处理器，是css的扩展；它允许使用变量、嵌套规则、混合(mixins)、函数、导入等功能，并且完美的兼容 css 语法。
scss 和 sass 其实是两个可以互相转化的语法版本；sass 是一种缩排语法，提供了一种更简洁的 css 书写方式；它不适用花括号，而是通过缩排的方式来表达选择符的嵌套层级，就像 .pug 文件格式一样，而且也不使用分号，而是使用换行符来分割属性；scss 的全称是 sassy css，是一个 css3 语法的扩充版本。
基本使用：
1、变量
scss中所有变量的定义是以 $ 开头的；
在 scss 中允许使用的变量主要有六种：
1)、数字(例如：1.2、13、10px)；
2)、文本字符串，无论是否有引号(例如“foo”,'bra',baz)；
3)、颜色(例如blue、#04a3ddd、rgba(100,100,100,.5))；
4)、布尔值;
5)、空值；
6)、值列表，用空格或者逗号隔开(例如1.5rem 1rem 1.0rem、10、12、11);
此外，scss 还支持 css 的其他的属性值类型，例如unicode范围和 !important；
例如： $ 20px；$width; 如果是插在字符串之间的就必须用 #{}；例如： $side: left ; border-#{$side}-radius: 4px;
运算
scss 支持的运算包括：加、减、乘、除、取余，以及>、>=、<、<=、 == 、!=；
例如： 100px/100px; $width/2; round(2.3)/2; 5px + 10px/2;
scss 支持的运算不仅是数字之间的运算，也支持颜色的运算；
例如：color: #012345 + #234123;
scss 嵌套
1)、选择器的嵌套
div {
100%;
div {
80%;
}
}
2)、属性嵌套
div {
border: {
1px;
color: #eee;
}
}
3)、代码块内的嵌套，利用'&'表示对父元素的引用
div {
color: #eee;
&:hover {
color: #fff;
}
}
代码的复用
1、继承
.class1 { 10px; height: 20px; } .class2 { @extend .class1; font-size: 12px; }
2、mixin的定义和引用
@mixin text( $width) { $width; height: 30px; } div { @include text(20px); }
mixin其实就像函数一样，或者 c 语言以及 java 中宏的概念；在使用的时候，如果没有参数的时候，我们就不能带 小括号，如果存在参数的时候就要带小括号了，而且这里也是可以利用 es6 的结构赋值，进行设定默认值的；
3、自定义函数
@function fn($val) { return $val - 1 } div { fn(20px)}
逻辑判断
1、if...else
div { @if (true) { color: red; } @else { color: blue}
2、for循环
div {
@for $index from 1 to 10 {
&:nth-of-type($index) {
10px * $index;
}
}
}
3、each循环
@each $name in one,two,three{
.#{$name} {
color: red;
}
}
引用和注释
引用： @import './a.scss
注释： // 单行注释
/* 标准的css注释 */
/* ! 重要的注释 ! */