SCSS的一些小笔记

1. 嵌套选择器：&

   .row {
     flex-wrap: wrap;
     border: 1px solid red;
     display: flex;
     &.align-left {
     }
   }

2. 注释：以！为首会保留输出到CSS
3. 变量：$width:5em;(有作用域，其中$m-width和$_width代表同一个变量)
4. 插值：#{}

5. @mixin：支持参数

   //声明
   @minxin name{
   //重复代码
   }
   //使用
   @include name{
   }

6. %placeholder：不支持参数

   //声明
   % name{
   //重复代码
   }
   //使用
   @extwnd %name{
   }

   @mixin 和 %placeholder 区别：除了是否支持参数外，@mixin 是把重复的代码抄到选择器内，而%placeholder 则是把选择器抄到代码头上。

7. @Function

   //声明
   @function x2($value){
       @return $value*2
   }
   //使用
   width:x2(80px);//使属性可复用