@mixin 指令允許我們定義一個可以在整個樣式表中重復(fù)使用的樣式。
@include 指令可以將混入（mixin）引入到文檔中。

定義一個混入

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

/* 創(chuàng)建一個名為 "important-text" 的混入 */
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

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

使用混入

@include 指令

/* 使用混入 */
selector {
  @include mixin-name;
}

例：

/* 將important-text混入 */
.danger {
  @include important-text;
  background-color: green;
}

// 轉(zhuǎn)化為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ù)

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

可變參數(shù)

瀏覽器前綴使用混入

上一篇：4.Sass @import與Partials >>

下一篇：6.Sass @extend 與 繼承 >>