scss null在@mixin傳參中的應用

關於@mixin的用法可以參閱以下兩篇文章:

（1）.@mixin基本用法可以參閱scss @mixin一章節。

（2）.@mixin傳參可以參閱scss @mixin傳參一章節。

可以給混合器宣告引數，以便靈活的配置相關屬性值，看如下程式碼:

[Scss] 純文字檢視 複製程式碼
@mixin antzone-div($color, $font-size) {
  color:$color;
  font-size:$font-size;
}
div{
  @include antzone-div(blue,16px);
}

上面的混合器具有兩個引數，在呼叫混合器的時候，必須要傳遞兩個引數，否則會報錯。

實際應用中，可能並非需要傳遞每一個引數，這個時候只要給引數設定一個預設值即可。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@mixin antzone-div($color, $font-size:16px) {
  color:$color;
  font-size:$font-size;
}
div{
  @include antzone-div(blue);
}

上面的程式碼編譯生成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
div {
  color: blue;
  font-size: 16px; 
}

也可能font-size: 16px這句程式碼也不是必須的，只要將對應的引數預設值設定為null即可。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@mixin antzone-div($color, $font-size:null) {
  color:$color;
  font-size:$font-size;
}
div{
  @include antzone-div(blue);
}

上面的程式碼編譯為css程式碼如下:

[CSS] 純文字檢視 複製程式碼
div {
  color: blue; 
}