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

混合器使用@mixin標識符定義?？瓷先ズ芟衿渌?code>CSS @標識符，比如說@media或者@font-face。這個標識符給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式。下邊的這段sass代碼，定義了一個非常簡單的混合器，目的是添加跨瀏覽器的圓角邊框。

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

然后就可以在你的樣式表中通過@include來使用這個混合器，放在你希望的任何地方。@include調用會把混合器中的所有樣式提取出來放在@include被調用的地方。如果像下邊這樣寫:

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全部來自rounded-corners這個混合器。這一節(jié)將介紹使用混合器來避免重復。通過使用參數(shù)，你可以使用混合器把你樣式中的通用樣式抽離出來，然后輕松地在其他地方重用。實際上，混合器太好用了，一不小心你可能會過度使用。大量的重用可能會導致生成的樣式表過大，導致加載緩慢。所以，首先我們將討論混合器的使用場景，避免濫用。