Sass中@mixin與@include有什么用

Sass 是一種 CSS 的預編譯語言。它提供了 變量（variables）、嵌套（nested rules）、 混合（mixins）、 函數(shù)（functions）等功能，并且完全兼容 CSS 語法。Sass 能夠幫助復雜的樣式表更有條理， 并且易于在項目內(nèi)部或跨項目共享設計。

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

將以上代碼轉(zhuǎn)換為 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;
}

向混入傳遞變量 混入可以接收參數(shù)。

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

定義可以接收參數(shù)的混入：

實例

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

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

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

以上實例的混入?yún)?shù)為設置邊框的屬性 (color 和 width) 。

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

Css 代碼：

.myArticle {
 border: 1px solid blue;
}

.myNotes {
 border: 2px solid red;
}

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

實例

@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); }h2 { @include sexy-border(blue, 2in); }

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

Css 代碼：

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

可變參數(shù)

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

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

實例

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

將以上代碼轉(zhuǎn)換為 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));
}

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

Css 代碼：

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