Sass混合的使用

本節我們學習 Sass 中的混合，Sass 中的混合是通過 @mixin 指令來定義的，混合允許我們定義可以在整個樣式表中重複使用的樣式，避免使用無語意的類。混合可以包含所有的 CSS 規則和任何其他在 Sass 文檔中被允許使用的內容。

定義混合

Sass 中可以通過 @mixin 指令定義混合，@mixin 後面接混合的名稱和可選的 arguments 參數，以及混合的內容塊。

示例：

例如創建一個名爲 my-text 的混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
}

此時我們運行代碼，上述混合是不會被編譯到 CSS 代碼中的，只有當我們使用了這個混合時，纔會被編譯。

注意，Sass 的連接符號 - 和下劃線 _ 是相同的，也就是說 my-text 與 my_text 是一樣的。

混合的使用

混合定義好後，我們就可以在選擇器使用混合，可以通過 @include 來使用這混合。@include 調用會把混合器中的所有樣式提取出來放在 @include 被調用的地方。

示例：

例如我們使用上面定義好的混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
}

p{
    @include my_text();
}

編譯成 CSS 代碼：

p{
  font-size: 12px;
  color: #fdef92;
  font-weight: bold;
}

從上述代碼可以看出，在選擇器 p 中的所有樣式屬性全部來自 my-text 這個混合器。

混合中除了使用樣式屬性，還可以包含選擇器，當一個包含選擇器的混合通過 @include 包含在一個父選擇器中時，在混合中的選擇器最終會被嵌套在父選擇器中。

示例：

例如我們定義一個混合，這個混合中包含一個選擇器 .child，然後在另一個選擇器中使用這個混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
    .child{
        background-color: #68f7f7;
    }
}

.other{
    @include my_text();
}

編譯成 CSS 代碼：

.other {
  font-size: 12px;
  color: #fdef92;
  font-weight: bold;
}
.other .child{
  background-color: #68f7f7;
}

我們在 .other 選擇器中調用 my-text，然後可以看到在編譯成的 CSS 代碼中，.child 選擇器變爲了 .other 選擇器的後代選擇器。

總結

雖然混合很好用，但是也不能亂用，大量的重用可能會導致生成的樣式表過大，導致加載緩慢。所以我們要注意混合的使用場景，如果一段代碼使用的頻率很高，那麼就可以將這段代碼構成一個混合。

判斷一組屬性是否應該組合成一個混合，一條經驗法則就是你能否爲這個混合想出一個好的名字。如果你能找到一個很好的短名字來描述這些屬性修飾的樣式，那麼往往能夠構造一個合適的混合器，反之這個混合可能並不適合。