css的预处理语言：scss（sass的进阶版，扩展名不同，严格缩进式语法。scss 语法同css） less
sass编译：
单文件编译：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
多文件编译：
sass sass/:css/
开启watch实时编译：
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css --style nested
--style：多种输出方式：nested嵌套式、expanded展开式、compact横向展开、compressed一行文件展开
sass变量声明：
$+变量名+：+变量值：$width:100px;
默认变量：后面加!default
还要局部变量、全局变量
sass嵌套：
选择器嵌套、属性嵌套、伪类嵌套
sass混合宏：
声明混合宏@mixin 命名（参数）{样式}
调用混合宏@include 命名（实参）
sass继承：在sass中的继承，可以继承类样式块中所有样式代码，而且编译出来的css会将选择器合并在一起，形成组合选择器。
用法：@extend class名
sass占位符%：声明之后不被@extend调用则不编译
sass插值：
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {//对每个在$properties中的$prop,即$properties中的margin、padding
#{$prop}-#{$side}: $value;//$prop连接参数$side，值为参数$value }}
.login-box {
@include set-value(top, 14px);//调用混合宏}
sass运算：支持同类型单位加减法，单位和数字乘除法、数字运算、颜色运算、字符运算
sass注释：
/*注释内容*/:会在编译出来的css文件中显示
//注释内容：不会在编译出来的css文件中显示
流程控制
条件语句：@if 1+1==2 { 样式 } @else { 样式 }
循环语句：
@for $i from 1 to 10 { 样式 }
$i: 6; //定义变量
@while $i>0{
.item-#{$i} { 样式 }
$i: $i-2;
}
@each $member in a,b,c,d { .#{ $member } { 样式 }
函数：@function 函数名 ($参数){ return 参数计算 }
.class { width：函数名（实参）}
参考文章：
css选择器详解：http://www.w3school.com.cn/cssref/css_selectors.asp
scss（sass）入门简介：https://blog.csdn.net/zhao_tuo/article/details/72820992
sass和scss区别及scss特性总结：https://blog.csdn.net/baozhuona/article/details/78570683
css函数：https://blog.csdn.net/leadn/article/details/78562873?locationNum=6&fps=1
