CSS外掛：Sass 之混合宏(@mixin)、繼承(@extend)、佔位符(%placeholder)

學習Sass無非就是想高效的、 面向對象編寫CSS，Sass中的@-Rules也是重要的一部分。
廣泛狀況下這仨在實際項目中用得仍是比較多的，玩起來吧！

1. 混合宏@mixin

若是你的代碼塊中涉及到變量，建議使用混合宏來建立相同的代碼塊。
特色：可傳參。
不足：若是在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，形成代碼的冗餘。

---

SCSS：

.fl{
  @include float(left)
  div{
    @include float(left)
  }
}
.fr{
  @include float(right)
}

實際生成的CSS：

.fl { float: left; }
.fl div { float: left; }
.fr { float: right; }

而我想要的是這樣的CSS：

.fl, .fl div { float: left; }
.fr { float: right; }
//相同的`CSS`不會合並...看來'你'也就只有傳參好使了！

SCSS：

@mixin br3{ /* 沒有傳參 */
    border-radius: 3px;
}
@mixin br4($br4){ /* 傳一個不帶值的參數 */
    border-radius: $br4;
}
@mixin br6($br6: 6px){ /* 傳一個帶值的參數 */
      border-radius: $br6;
}
@mixin position-center($width, $height){ /* 傳多個參數 */
    width: $width;
    height: $height;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: (-($height)/2) 0 0 (-($width)/2);    
}
div{
    @include br4(4px); /* 調用混合宏 */
    @include br3();   /* 沒有傳值3px */
    @include br6();   /* 若是不傳值就是6px,傳值會覆蓋原始值 */
}
.pos-center{
    @include position-center(600px, 300px);
}

2. 繼承@extend()

若是你的代碼塊不須要專任何變量參數，並且有一個基類已在文件中存在，那麼建議使用 繼承。
不足：若是是類(.class)，無論有沒有調用(@extend)，在編譯的時候，都會生成對應的CSS。

.db{ display:block; }
div{ @extend .db }
生成的代碼：
.db, div{ display:block; } /* .db也生成出來 */

---

SCSS：

@mixin border-radius{
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.btn {
  @include border-radius;
}
.box {
  @extend .btn;
  margin-bottom: 10px;
}

CSS：

/* 生成後的代碼 */
.btn, .box {  -webkit-border-radius: 3px;  border-radius: 3px; }
.box { margin-bottom: 5px; }

3. 佔坑符%placeholder

佔坑和繼承基本相似，惟一不一樣的是，相同的生成CSS塊並無在類中存在，而是額外聲明。
若是不調用已聲明的佔位符，將不會產生任何CSS。
若是在不一樣選擇器調用佔位符，那麼編譯出來CSS將會把相同的代碼合併在一塊兒。
不足：就是不能傳參啦！我的以爲%placeholder優於@extend。

SCSS：

%mt15 {
  margin-top: 15px;
}
%pt15{
  padding-top: 15px;
}

.btn6 {
  @extend %mt15;
  @extend %pt15;
}
.block {
  //@extend .btn6    
  @extend %mt15;
  @extend %pt15;
}

CSS：

/* 生成的代碼 */
.btn6, .block { margin-top: 15px; }
.btn6, .block { padding-top: 15px; }
/* 然而不會和已有代碼合併，卻是合併啊 */

4. Reference API

SASS_REFERENCE — Sass Documentation #Directives

注：爲了第一篇文章發佈成功，回頭整理整理SASS。若有不正之處，歡迎指正。