sass的mixin,extend,placeholder,function

1. mixin

就是定義了一個函數，可以傳參，并且設定預設值，css選擇器可以通過@include來引用，mixin混入的代碼，就是原樣複制，不會合并，會造成備援

例如：

@mixin br6($br6: 6px){ /* 傳一個帶值的參數 */
      border-radius: $br6;
}
div{
    @include br6();   /* 如果不傳值就是6px,傳值會覆寫原始值 */
}      

再如：

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @include icon;
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  @include icon;
  /* 資訊圖示指定的樣式... */
}      

會生成：

.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* 資訊圖示指定的樣式... */
}      

其中的.icon的代碼是重複的。

2. @extend

是繼承一個class，其會複制父class的内容，但是會合并，即父子用逗号隔開，寫在一起，無多餘的備援代碼

例如：

.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @extend .icon;
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  @extend .icon;
  /* 資訊圖示指定的樣式... */
}      

會生成：

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  /* 資訊圖示指定的樣式... */
}      

3. %placeholder

相當于一個虛拟的class，是為了解決@extend直接繼承class，父class會被生成的問題。

因為一個父class有可能隻是用來被繼承的，本身不會被使用，生成出來占用空間。占位符可以解決這個問題

例如：

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @extend %icon;
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  @extend %icon;
  /* 資訊圖示指定的樣式... */
}      

生成為：

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  /*錯誤圖示指定的樣式... */
}
 
.info-icon {
  /* 資訊圖示指定的樣式... */
}      

沒有生成被繼承的.icon這個class。%placeholder和@extend是配合使用的，沒有替代之說。

%placeholder在@media中使用需要注意，不能在@media中直接寫extend。

例如下面的會報錯：

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
@media screen {
  .error-icon {
    @extend %icon;
  }
 
  .info-icon {
    @extend %icon;
  }
}      

正确的是(隻将placeholder寫在@media中，extend寫在@media外面)：

@media screen {
  %icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}
 
.error-icon {
  @extend %icon;
}
 
.info-icon {
  @extend %icon;
}      

4. 自定義函數

@function可以自定義函數，可以在css選擇器中直接引用，和mixin十分類似

例如:

@function double($n) {
　　@return $n * 2;
}

#sidebar {
　　width: double(5px);
}      

參考：https://blog.csdn.net/kaosini/article/details/40615123

轉載于:https://www.cnblogs.com/mengff/p/9566281.html