5. 混合器

如果你的整個(gè)網(wǎng)站中有幾處小小的樣式類(lèi)似(例如一致的顏色和字體)，那么使用變量來(lái)統(tǒng)一處理這種情況是非常不錯(cuò)的選擇。但是當(dāng)你的樣式變得越來(lái)越復(fù)雜，你需要大段大段的重用樣式的代碼，獨(dú)立的變量就沒(méi)辦法應(yīng)付這種情況了。你可以通過(guò)sass的混合器實(shí)現(xiàn)大段樣式的重用。

混合器使用@mixin標(biāo)識(shí)符定義。看上去很像其他的CSS @標(biāo)識(shí)符，比如說(shuō)@media或者@font-face。這個(gè)標(biāo)識(shí)符給一大段樣式賦予一個(gè)名字，這樣你就可以輕易地通過(guò)引用這個(gè)名字重用這段樣式。下邊的這段sass代碼，定義了一個(gè)非常簡(jiǎn)單的混合器，目的是添加跨瀏覽器的圓角邊框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然后就可以在你的樣式表中通過(guò)@include來(lái)使用這個(gè)混合器，放在你希望的任何地方。@include調(diào)用會(huì)把混合器中的所有樣式提取出來(lái)放在@include被調(diào)用的地方。如果像下邊這樣寫(xiě):

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最終生成:

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

在.notice中的屬性border-radius-moz-border-radius和-webkit-border-radius全部來(lái)自rounded-corners這個(gè)混合器。這一節(jié)將介紹使用混合器來(lái)避免重復(fù)。通過(guò)使用參數(shù)，你可以使用混合器把你樣式中的通用樣式抽離出來(lái)，然后輕松地在其他地方重用。實(shí)際上，混合器太好用了，一不小心你可能會(huì)過(guò)度使用。大量的重用可能會(huì)導(dǎo)致生成的樣式表過(guò)大，導(dǎo)致加載緩慢。所以，首先我們將討論混合器的使用場(chǎng)景，避免濫用。