所有变量用$开头，如果变量要嵌套在字符串里，用#{$var}格式
$side : left;
h2 { padding-#{$side}: 1rem; }
计算功能
$mul : 5;
h2 { font-size:0.1rem * $mul; }
嵌套，自身属性嵌套需要“：”，可以用&引用自身。子元素直接嵌套，可以混写
h2{
margin: {
left:0.5rem;
top:0.3rem;
}
&:after{
content:'';
display:block;
height:1rem;
}
span {
color:#c10;
}
}
类的继承 @extend %class,一般用占位符的写法提高识别度
在@media中不支持外部定义的"类" ！fuck
%bt { border-bottom:1px solid #ddd;}
.foo {
@extend %bt; //优先级最低，首先编译
border-top :1px solid #ccc;
}
@mixin 引用，可传递参数，使用@include调用
@mixin padding($pl:0.2rem,$pt,$pr,$pb){
padding-left :$pl;
padding-top:$pt;
padding-right:$pr;
}
h2 {
@include padding(0.1rem,0.2rem,0.3rem,0.4rem); // 参数数量必须相同。声明时几个，调用时必须几个,支持设置默认值
}
for循环 @for $i from 1 to/through 6 { }
to：后开区间，through：后闭区间！坑爹的语法
@for $i from 1 through 6 {
.box#{$i}{
backgorund-image:url(img/icon#{$i}.png);
}
}
each循环 @each $attr in a,b,c,d { }
@each $attr in a,b,c,d {
.box-#{$attr} {
background-image:url(img/icon-#{$attr}.png);
}
}
自定义函数
@function double($n) {
@return $n * 2;
}
颜色函数
lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%); /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%); /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color); /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color); /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/
