原文：https://www.sitepoint.com/sass-mixin-placeholder/
一年半之前，我開始使用Sass的時候拉庵，對于include a mixin和extending a placeholder的區(qū)別灿椅，我花費了一些時間去理解它們。
在那個時候钞支，單單placeholder的概念茫蛹，就已經相當于一種黑魔法巫術一樣讓我不知其解。
如果你有同樣的疑問烁挟，不要擔心婴洼，我接下來會說解釋指明它們之間的區(qū)別。今天我們會學到minxin是什么東西撼嗓，和什么時候去使用Sass的placeholder柬采。你會明白他們有不同的用處欢唾，不能混淆使用。
提醒：我接下來要談論的關于Sass的觀點粉捻，同樣適用于其他CSS預處理器礁遣，不管是Stylus，Less肩刃，還是其他的祟霍。技術大多做的是同樣的事情，所以完全不用擔心這篇文章的內容盈包，是否適合你已經選擇使用的其他CSS預編譯工具沸呐。
首先我們先去熟悉和認識 Sass placeholders and mixins
Mixin it up, 混合體，封裝體
一個mixin指令可以讓你去定義很多CSS規(guī)則呢燥。把它看做是一個function函數(shù)垂谢，方法，這個function可以有自己的參數(shù)疮茄。它會輸出這些css規(guī)則內容，而不是返回一個值根暑。下邊是來自Sass官方參考里定義：
Mixins允許自己定義樣式力试，這些樣式可以在全局樣式表里重用，而不用去借助一些無語義的類排嫌，比如.float-left畸裳。Mixins可以包含完整的CSS樣式規(guī)則和其他Sass中的特性規(guī)則等。mixin還可以接收參數(shù)淳地，不同的參數(shù)值將產生不同的樣式規(guī)則怖糊。
在樣式表中，你會見到一些CSS規(guī)則聲明被重復出現(xiàn)了好多次颇象。你明白這樣的代碼不好伍伤，而且還知道DRY（Don't Repeat yourself）這個概念原則。現(xiàn)在使用mixin去改善這樣的代碼：
@mixin center() {
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
@include center();
/* Other styles here... */
}
/* Other styles... */
.image-cover {
@include center;
}
提醒：include使用的時候遣钳，如果你不傳遞參數(shù)給mixin扰魂，那么可以去掉mixin名字后邊的括號。比如
@include center; 其實你也可以在mixin定義的時候就把括號去掉蕴茴。比如@mixin center {}
定義了這個mixin之后劝评，你就不用每次去重復那三行元素居中的規(guī)則。使用的時候倦淀，就去包含這個mixin蒋畜。
在某些情況下，可以使用一個mixin去創(chuàng)建一些屬性組合的“縮寫”撞叽。例如 width 和 height姻成。你應該已經厭倦了重復書寫這兩行屬性插龄。特別是當這兩個屬性值一樣的時候。現(xiàn)在我們就使用一個mixin來解決這些問題佣渴！
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
很簡單吧辫狼。這里我們設置hight屬性的默認值和width參數(shù)的值一樣。當你想定義一個元素的面積大小時辛润，你可以這樣做：
.icon {
@include size(32px);
}
.cover {
@include size(100%, 10em);
}
提醒：當我想去設置一個元素的position屬性時膨处，為了避免逐個書寫top, right, bottom, left這些屬性。也可以去使用mixin這種很好的語法糖砂竖。
認識 Placeholder(占位符)
Placeholders 是一種奇怪的東西真椿。它們是class，但是在Sass編譯過后乎澄，并不會被輸出突硝，出現(xiàn)在樣式表文件里。然后你會問它有什么意義置济。事實上解恰，如果不是為了@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的命名規(guī)則羞酗。
如果編譯Sass文件腐宋，placeholder的代碼不會出現(xiàn)在生成的css的文件里。正如我說過的檀轨，placeholder的代碼不會被編譯出現(xiàn)在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的常用法。當你使用模塊組件化開發(fā)一個網站或者應用淤袜，繼承選擇器是便利的痒谴。
使用哪一個
我們應該使用哪一個，mixin還是placeholder铡羡。要看具體使用場景积蔚。
最好的建議是：如果你需要參數(shù)變量，使用mixin烦周。否則尽爆，繼承一個placehodler怎顾。這樣做兩個原因：
第一，在placeholder里面漱贱，不能像mixin那樣傳遞使用參數(shù)變量槐雾。但是可以使用全局變量。
第二幅狮，當你使用mixin時募强，Sass會重復輸出這個mixin的屬性規(guī)則內容，不會讓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;
}
看起來好多了吧。這樣就避免了總是重復相同的屬性規(guī)則命斧，使用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，而且知道什么時候去使用它們和它們編譯之后的效果斯嚎。
