scss

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