如果你的整個網站中有幾處小樣式類似，比如顏色，字體等，在 Sass 可以使用變量來統一處理，那么這種選擇還是不錯的。但當你的樣式變得越來越復雜，需要重復使用大段的樣式時，使用變量就無法達到我們目了。這個時候 Sass 中的混合宏就會變得非常有意義。在這一節中，主要向大家介紹 Sass 的混合宏。

1、聲明混合宏

不帶參數混合宏：

在 Sass 中，使用“@mixin”來聲明一個混合宏。如：

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

其中 @mixin 是用來聲明混合宏的關鍵詞，有點類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號里面是復用的樣式代碼。

帶參數混合宏：

除了聲明一個不帶參數的混合宏之外，還可以在定義混合宏時帶有參數，如：

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

復雜的混合宏：

上面是一個簡單的定義混合宏的方法，當然， Sass 中的混合宏還提供更為復雜的，你可以在大括號里面寫上帶有邏輯關系，幫助更好的做你想做的事情,如：

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

這個 box-shadow 的混合宏，帶有多個參數，這個時候可以使用“ … ”來替代。簡單的解釋一下，當 $shadow 的參數數量值大于或等于“ 1 ”時，表示有多個陰影值，反之調用默認的參數值“ 0 0 4px rgba(0,0,0,.3) ”。

注：復雜的混合宏中的邏輯關系（@if...@else）后面小節會有講解。