SCSS的一些小笔记

嵌套选择器：&

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

@mixin：支持参数

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

%placeholder：不支持参数

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

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

@Function

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