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);// 使属性可复用