SAAS

0. 混合宏传参

   // 不带值传参
   @mixin border-radius($radius) {
       border-radius: $radius;
       -webkit-border-radius: $radius;
   }
   // 带一个值传参
   @mixin border-radius($radius:3px) {
       border-radius: $radius;
       -webkit-border-radius: $radius;
   }
   ​
   调用：
   .box {
       @include border-radius(3px);
   }
   ​
   // 带多个值
   @mixin center($width:200px, $height:200px)
   ​
   调用：
   .box {
       @include center; // 如果传值，覆盖默认值
   }
   

1. 混合宏的不足

   a. 会产生冗余的代码块
   b. 不能智能的将相同的样式代码块合并在一起
   

2. @extend 继承

   //SCSS
   .btn {
     border: 1px solid #ccc;
     padding: 6px 10px;
     font-size: 14px;
   }
   ​
   .btn-primary {
     background-color: #f36;
     color: #fff;
     @extend .btn;
   }
   ​
   .btn-second {
     background-color: orange;
     color: #fff;
     @extend .btn;
   }
   

3. 占位符 %placeholder， 如果不被@extend 调用，不会产生任何代码

   //SCSS
   %mt5 {
     margin-top: 5px;
   }
   %pt5{
     padding-top: 5px;
   }
   ​
   .btn {
     @extend %mt5;
     @extend %pt5;
   }
   

4. 混合宏 VS 继承 VS 占位符

   - 混合宏：可以传参，如果涉及到变量，建议使用混合宏， 缺点（不会自动合并代码）
   - 继承：会合并代码，确定（不管调不调用，都会产生基类对应的样式代码）
   - 基本和继承一样，但相同代码块并没有在基类中存在，而是额外声明。 如果不调用，则不会产生任何样式代码。
   

   

5. 插值 #{}

   @each $var in $list // $list 是一个SassScript表达式
   ​
   $properties: (margin, padding);
   @mixin set-value($side, $value) {
       @each $prop in $properties {
           #{$prop}-#{$side}: $value;
       }
   }
   .login-box {
       @include set-value(top, 14px);
   }
   ​
   // 解析后
   .login-box {
       margin-top: 14px;
       padding-top: 14px;
   }
   

6. 数据类型

   Sass中的值类型：用空格后者逗号分开
   字符串类型：有引号字符串、无引号字符串
   ​
   

7. Sass列表函数

   - nth函数（nth function） 可以直接访问值列表中的某一项；
   - join函数（join function） 可以将多个值列表连结在一起；
   - append函数（append function） 可以在值列表中添加值； 
   - @each规则（@each rule） 则能够给值列表中的每个项目添加样式。
   

8. 运算

   加法
   .box {
     width: 20px + 8in; // 788px
   }
   乘法，支持的单位（em，px，%）
   .box {
     width: 10px * 2; // 两个值单位相同，只需为一个值提供单位，否则会报错
   }
   除法，当只有数字时，需要加括号
   .box {
     width: (100px / 2);  
   }
   

9. @if

   @mixin blockOrHidden($boolean:true) {
     @if $boolean {
         @debug "$boolean is #{$boolean}";
         display: block;
       }
     @else {
         @debug "$boolean is #{$boolean}";
         display: none;
       }
   }
   
   .block {
     @include blockOrHidden;
   }
   
   .hidden{
     @include blockOrHidden(false);
   }
   

10. @for循环 @while循环

    @for $i from <start> through <end>
    @for $i from <start> to <end>
    这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数
    @for $i from 1 to 3 {
      .item-#{$i} { width: 2em * $i; }
    }
    // 编译后
    .item-1 {
      width: 2em;
    }
    .item-2 {
      width: 4em;
    }
    eg:
    $grid-prefix: span !default;
    $grid-width: 60px !default;
    $grid-gutter: 20px !default;
    
    %grid {
      float: left;
      margin-left: $grid-gutter / 2;
      margin-right: $grid-gutter / 2;
    }
    @for $i from 1 through 12 {
      .#{$grid-prefix}#{$i}{
        width: $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
      }  
    }
    

    //SCSS
    $types: 4;
    $type-width: 20px;
    
    @while $types > 0 {
        .while-#{$types} {
            width: $type-width + $types;
        }
        $types: $types - 1;
    }
    

11. 函数

    percentage($value)：将一个不带单位的数转换成百分比值；
    round($value)：将数值四舍五入，转换成一个最接近的整数；
    ceil($value)：将大于自己的小数转换成下一位整数；
    floor($value)：将一个数去除他的小数部分；
    abs($value)：返回一个数的绝对值；
    min($numbers…)：找出几个数值之间的最小值；
    max($numbers…)：找出几个数值之间的最大值；
    random(): 获取随机数
    
    length($list)：返回一个列表的长度值；
    nth($list, $n)：返回一个列表中指定的某个标签值
    join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
    append($list1, $val, [$separator])：将某个值放在列表的最后；
    zip($lists…)：将几个列表结合成一个多维的列表；
    index($list, $value)：返回一个值在列表中的位置值。
    

12. @at-root 从字面上解释就是跳出根元素

\