5-3. 給混合器傳參
混合器并不一定總得生成相同的樣式。可以通過在@include
混合器時給混合器傳參,來定制混合器生成的精確樣式。當@include
混合器時,參數其實就是可以賦值給css
屬性值的變量。如果你寫過JavaScript
,這種方式跟JavaScript
的function
很像:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
當混合器被@include
時,你可以把它當作一個css
函數來傳參。如果你像下邊這樣寫:
a {
@include link-colors(blue, red, green);
}
//Sass最終生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
當你@include混合器時,有時候可能會很難區分每個參數是什么意思,參數之間是一個什么樣的順序。為了解決這個問題,sass
允許通過語法$name: value
的形式指定每個參數的值。這種形式的傳參,參數順序就不必再在乎了,只需要保證沒有漏掉參數即可:
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
盡管給混合器加參數來實現定制很好,但是有時有些參數我們沒有定制的需要,這時候也需要賦值一個變量就變成很痛苦的事情了。所以sass
允許混合器聲明時給參數賦默認值。