Sass @mixin 與 @include

@mixin 指令允許我們定義一個可以在整個樣式表中重復使用的樣式。

@include 指令可以將混入（mixin）引入到文檔中。

---

定義一個混入

混入(mixin)通過 @mixin 指令來定義。 @mixin name { property: value; property: value; ... }

以下實例創(chuàng)建一個名為 "important-text" 的混入：

Sass 代碼：

@mixin?important-text?{
??color:?red;
??font-size:?25px;
??font-weight:?bold;
??border:?1px?solid?blue;
}

注意：Sass 的連接符號 - 與下劃線符號 _ 是相同的，也就是 @mixin important-text { } 與 @mixin important_text { } 是一樣的混入。

使用混入

@include 指令可用于包含一混入：

Sass @include 混入語法：

selector?{
??@include?mixin-name;
}

因此，包含 important-text 混入代碼如下：

實例

.danger?{
??@include?important-text;
??background-color:?green;
}

將以上代碼轉換為 CSS 代碼，如下所示：

Css 代碼：

.danger?{
??color:?red;
??font-size:?25px;
??font-weight:?bold;
??border:?1px?solid?blue;
??background-color:?green;
}

混入中也可以包含混入，如下所示：

實例

@mixin?special-text?{
??@include?important-text;
??@include?link;
??@include?special-border;
}

---

向混入傳遞變量

混入可以接收參數。

我們可以向混入傳遞變量。

定義可以接收參數的混入：

實例

/* 混入接收兩個參數 */
@mixin?bordered($color,?$width)?{
??border:?$width?solid?$color;
}

.myArticle?{
??@include?bordered(blue,?1px);??// 調用混入，并傳遞兩個參數
}

.myNotes?{
??@include?bordered(red,?2px);?// 調用混入，并傳遞兩個參數
}

以上實例的混入參數為設置邊框的屬性 (color 和 width) 。

將以上代碼轉換為 CSS 代碼，如下所示：

Css 代碼：

.myArticle?{
??border:?1px?solid?blue;
}

.myNotes?{
??border:?2px?solid?red;
}

混入的參數也可以定義默認值，語法格式如下：

實例

@mixin?bordered($color:?blue,?$width:?1px)?{
??border:?$width?solid?$color;
}

在包含混入時，你只需要傳遞需要的變量名及其值：

實例

@mixin?sexy-border($color,?$width:?1in)?{
??border:?{
? ??color:?$color;
? ??width:?$width;
? ? style:?dashed;
??}
}
p?{?@include?sexy-border(blue);?}
h1?{?@include?sexy-border(blue,?2in);?}

將以上代碼轉換為 CSS 代碼，如下所示：

Css 代碼：

p?{
??border-color:?blue;
??border-width:?1in;
??border-style:?dashed;?}

h1?{
??border-color:?blue;
??border-width:?2in;
??border-style:?dashed;
}

可變參數

有時，不能確定一個混入（mixin）或者一個函數（function）使用多少個參數，這時我們就可以使用?...?來設置可變參數。

例如，用于創(chuàng)建盒子陰影（box-shadow）的一個混入（mixin）可以采取任何數量的 box-shadow 作為參數。

實例

@mixin?box-shadow($shadows...)?{
? ? ??-moz-box-shadow:?$shadows;
? ? ??-webkit-box-shadow:?$shadows;
? ? ??box-shadow:?$shadows;
}

.shadows?{
??@include?box-shadow(0px?4px?5px?#666,?2px?6px?10px?#999);
}

將以上代碼轉換為 CSS 代碼，如下所示：

Css 代碼：

.shadows?{
? -moz-box-shadow:?0px?4px?5px?#666,?2px?6px?10px?#999;
? -webkit-box-shadow:?0px?4px?5px?#666,?2px?6px?10px?#999;
??box-shadow:?0px?4px?5px?#666,?2px?6px?10px?#999;
}

---

瀏覽器前綴使用混入

瀏覽器前綴使用混入也是非常方便的，如下實例：

實例

@mixin?transform($property)?{
??-webkit-transform:?$property;
??-ms-transform:?$property;
? transform:?$property;
}

.myBox?{
??@include?transform(rotate(20deg));
}

將以上代碼轉換為 CSS 代碼，如下所示：

Css 代碼：

.myBox?{
? -webkit-transform:?rotate(20deg);
? -ms-transform:?rotate(20deg);
? transform:?rotate(20deg);
}