如果你的整個(gè)網(wǎng)站中有幾處小樣式類似，比如顏色，字體等，在 Sass 可以使用變量來統(tǒng)一處理，那么這種選擇還是不錯(cuò)的。但當(dāng)你的樣式變得越來越復(fù)雜，需要重復(fù)使用大段的樣式時(shí)，使用變量就無法達(dá)到我們目了。這個(gè)時(shí)候 Sass 中的混合宏就會(huì)變得非常有意義。在這一節(jié)中，主要向大家介紹 Sass 的混合宏。

1、聲明混合宏

不帶參數(shù)混合宏：

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

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

其中 @mixin 是用來聲明混合宏的關(guān)鍵詞，有點(diǎn)類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號(hào)里面是復(fù)用的樣式代碼。

帶參數(shù)混合宏：

除了聲明一個(gè)不帶參數(shù)的混合宏之外，還可以在定義混合宏時(shí)帶有參數(shù)，如：

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

復(fù)雜的混合宏：

上面是一個(gè)簡(jiǎn)單的定義混合宏的方法，當(dāng)然， Sass 中的混合宏還提供更為復(fù)雜的，你可以在大括號(hào)里面寫上帶有邏輯關(guān)系，幫助更好的做你想做的事情,如：

@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);
  }
}

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

注：復(fù)雜的混合宏中的邏輯關(guān)系（@if...@else）后面小節(jié)會(huì)有講解。