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。若有不正之处，欢迎指正。