建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)SASS教程:5-3.給混合器傳參
混合器并不一定總得生成相同的樣式?？梢酝ㄟ^(guò)在@include混合器時(shí)給混合器傳參，來(lái)定制混合器生成的精確樣式。當(dāng)@include混合器時(shí)，參數(shù)其實(shí)就是可以賦值給css屬性值的變量。如果你寫(xiě)過(guò)JavaScript，這種方式跟JavaScript的function很像:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}當(dāng)混合器被@include時(shí)，你可以把它當(dāng)作一個(gè)css函數(shù)來(lái)傳參。如果你像下邊這樣寫(xiě):
a {
@include link-colors(blue, red, green);
}
//Sass最終生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }當(dāng)你@include混合器時(shí)，有時(shí)候可能會(huì)很難區(qū)分每個(gè)參數(shù)是什么意思，參數(shù)之間是一個(gè)什么樣的順序。為了解決這個(gè)問(wèn)題，sass允許通過(guò)語(yǔ)法$name: value的形式指定每個(gè)參數(shù)的值。這種形式的傳參，參數(shù)順序就不必再在乎了，只需要保證沒(méi)有漏掉參數(shù)即可:
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}盡管給混合器加參數(shù)來(lái)實(shí)現(xiàn)定制很好，但是有時(shí)有些參數(shù)我們沒(méi)有定制的需要，這時(shí)候也需要賦值一個(gè)變量就變成很痛苦的事情了。所以sass允許混合器聲明時(shí)給參數(shù)賦默認(rèn)值。
網(wǎng)站名稱：創(chuàng)新互聯(lián)SASS教程:5-3.給混合器傳參
當(dāng)前鏈接：http://m.5511xx.com/article/coggjsh.html
