[Sass]混合宏-聲明混合宏

如果你的整個網站中有幾處小樣式類似，比如顏色，字體等，在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）後面小節會有講解。