Sass->何時使用Mixins 和 Placeholders

原文：www.sitepoint.com/sass-mixin-…

一年半以前，我開始使用Sass的時候，對於include a mixin和extending a placeholder的區別，我花費了一些時間去理解它們。 在那個時候，單單placeholder的概念，就已經至關於一種黑魔法巫術同樣讓我不知其解。

若是你有一樣的疑問，不要擔憂，我接下來會說解釋指明它們之間的區別。今天咱們會學到minxin是什麼東西，和何時去使用Sass的placeholder。你會明白他們有不一樣的用處，不能混淆使用。

提醒：我接下來要談論的關於Sass的觀點，一樣適用於其餘CSS預處理器，不論是Stylus，Less，仍是其餘的。技術大多作的是一樣的事情，因此徹底不用擔憂這篇文章的內容，是否適合你已經選擇使用的其餘CSS預編譯工具。

首先咱們先去熟悉和認識 Sass placeholders and mixins

Mixin it up, 混合體，封裝體

一個mixin指令可讓你去定義不少CSS規則。把它看作是一個function函數，方法，這個function能夠有本身的參數。它會輸出這些css規則內容，而不是返回一個值。下邊是來自Sass官方參考裏定義：

Mixins 容許本身定義樣式，這些樣式能夠在全局樣式表裏重用，而不用去借助一些無語義的類，好比.float-left。Mixins能夠包含完整的CSS樣式規則和其餘Sass中的特性規則等。mixin還能夠接收參數，不一樣的參數值將產生不一樣的樣式規則。

在樣式表中，你會見到一些CSS規則聲明被重複出現了好屢次。你明白這樣的代碼很差，並且還知道DRY（Don't Repeat yourself）這個概念原則。如今使用mixin去改善這樣的代碼：

@mixin center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.container {
  @include center();
  /* Other styles here... */
}
 
/* Other styles... */
 
.image-cover {
  @include center;
}
複製代碼

提醒：include使用的時候，若是你不傳遞參數給mixin，那麼能夠去掉mixin名字後邊的括號。好比 @include center; 其實你也能夠在mixin定義的時候就把括號去掉。好比 @mixin center {}

定義了這個mixin以後，你就不用每次去重複那三行元素居中的規則。使用的時候，就去包含這個mixin。

在某些狀況下，可使用一個mixin去建立一些屬性組合的「縮寫」。例如 width 和 height。你應該已經厭倦了重複書寫這兩行屬性。特別是當這兩個屬性值同樣的時候。如今咱們就使用一個mixin來解決這些問題！

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}
複製代碼

很簡單吧。這裏咱們設置hight屬性的默認值和width參數的值同樣。當你想定義一個元素的面積大小時，你能夠這樣作：

.icon {
  @include size(32px);
}
 
.cover {
  @include size(100%, 10em);
}

複製代碼

提醒：當我想去設置一個元素的position屬性時，爲了不逐個書寫top, right, bottom, left這些屬性。也能夠去使用mixin這種很好的語法糖。

認識 Placeholder(佔位符)

Placeholders 是一種奇怪的東西。它們是class，可是在Sass編譯事後，並不會被輸出，出如今樣式表文件裏。而後你會問它有什麼意義。事實上，若是不是爲了@extend這個指令，它都沒什麼意義。你能夠這樣去寫一個placeholder:

%center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

複製代碼

提醒：Like a placholder, a mixin is likewise useless unless its referenced, so this section is not necessarily saying they are different in that respect, but this is only clarifying that even though it looks similar to a CSS declaration block, it won’t get compiled on its own.

placeholder的寫法使用%，而不是.(點)，可是遵照class的命名規則。

若是編譯Sass文件，placeholder的代碼不會出如今生成的css的文件裏。正如我說過的，placeholder的代碼不會被編譯出如今css源文件裏。

placeholder 要經過 @extend 去使用。@extend指令的做用是繼承一個CSS選擇器的屬性或者一個Sass的placeholder代碼。例如：

.container {
  @extend %center;
}

複製代碼

這樣以後，Sass會得到%center這個placeholder的內容給.container 這個類。

另外，你還能夠extend一個CSS class，就像這樣：

.table-zebra {
  @extend .table;
 
  tr:nth-of-type(even) {
    background: rgba(0,0,0,.5);
  }
}

複製代碼

這是@extend的經常使用法。當你使用模塊組件化開發一個網站或者應用，繼承選擇器是便利的。

使用哪個

咱們應該使用哪個，mixin仍是placeholder。要看具體使用場景。 最好的建議是：若是你須要參數變量，使用mixin。不然，繼承一個placehodler。這樣作兩個緣由：

第一，在placeholder裏面，不能像mixin那樣傳遞使用參數變量。可是可使用全局變量。

第二，當你使用mixin時，Sass會重複輸出這個mixin的屬性規則內容，不會讓CSS選擇器公用這個mixin。這樣的話，樣式表將會變得很大。

@mixin center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.container {
  @include center;
}
 
.image-cover {
  @include center;
}

複製代碼

輸出以下：

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

複製代碼

看到重複的CSS了吧。若是隻有三行代碼重複的話，感受好像問題還不是很糟糕。可是若是這個mixin有300行呢。重複的代碼就太多了。那讓咱們使用placeholder改造一下這個示例：

%center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.container {
  @extend %center;
}
 
.image-cover {
  @extend %center;
}

複製代碼

下邊是生成的CSS：

.container, 
.image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

複製代碼

看起來好多了吧。這樣就避免了老是重複相同的屬性規則，使用placeholder，會讓整個樣式表文件很瘦。

另外，若是你在不一樣的地方都要使用一些屬性，可是這些屬性的值是變量決定的，那麼mixin是一個好的選擇。若是你的CSS屬性同時有固定的和變更的值，那麼你能夠組合使用mixin和placeholder。例如：

%center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
 
@mixin skin($color, $size) {
  @extend %center;
  background: $color;
  height: $size;
}
 
a { @include skin(pink, 10em) }
b { @include skin(blue, 90px) }

複製代碼

在這個示例裏邊，mixin繼承了placeholder, 生成了乾淨不重複的CSS：

a, b {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
 
a {
  background: pink;
  height: 10em;
}
 
b {
  background: blue;
  height: 90px;
}

複製代碼

總結

但願你已經清楚了什麼是mixins和placeholders，並且知道何時去使用它們和它們編譯以後的效果。