sass语法

所有变量用$开头，如果变量要嵌套在字符串里，用#{$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% 混合色*/