2.1 混入的基本使用

Sass 为我们提供了@mixin指令用于定义混入，就像JavaScript为我们提供了function关键字用于定义函数一样。其语法格式如下：

@mixin minxin-name(param1, param2, ...){
  // your styles...
}

和调用JavaScript函数不一样的是，Sass中的混入在定义后不是仅仅个给出一个混入名就可以了，准确的说这里不叫作调用，而叫做包含。也就是说使用混入指令@mixin定义好的一个混入，要想被包含在另一处位置。实现包含的功能需要使用到另外一个指令，那就是包含指令@include。

具体使用以一个例子来说明：

例如：

@mixin mybox-base {
  width: 60px;
  height: 26px;
}

.mybox {
  @include mybox-base;
  color:#1a1a1a;
  background-color:#e4e4e4
}

.mybox-critical {
  @include mybox-base;
  color:#fbff00;
  background-color:#ff3636
}

.mybox-warning {
  @include mybox-base;
  color:#00a09d;
  background-color:#d6da00
}

这里只定义了一个混入，也就是mybox-base，我们在下面三处包含了它。如果你本地安装了sass编译器，可以使用形如sass xxx.sass:xxx.css的命令将它编译成CSS文件，编译后的结果如下：

.mybox {
  width: 60px;
  height: 26px;
  color: #1a1a1a;
  background-color: #e4e4e4; }

.mybox-critical {
  width: 60px;
  height: 26px;
  color: #fbff00;
  background-color: #ff3636; }

.mybox-warning {
  width: 60px;
  height: 26px;
  color: #00a09d;
  background-color: #d6da00; }

/*# sourceMappingURL=test.css.map */

可以看出，@include指令将我们定义的混入中的样式添加到使用包含的位置处了。

// 允许传入字体颜色与背景色两个变量
@mixin mybox-base($font-color, $bg-color) {
  width: 60px;
  height: 26px;
  color: $font-color;
  background-color: $bg-color;
}

.mybox {
  @include mybox-base(#1a1a1a, #e4e4e4);
}

.mybox-critical {
  @include mybox-base(#fbff00, #ff3636);
}
  
.mybox-warning {
  @include mybox-base(#00a09d, #d6da00);
}

.mybox {
  width: 60px;
  height: 26px;
  color: #1a1a1a;
  background-color: #e4e4e4; }

.mybox-critical {
  width: 60px;
  height: 26px;
  color: #fbff00;
  background-color: #ff3636; }

.mybox-warning {
  width: 60px;
  height: 26px;
  color: #00a09d;
  background-color: #d6da00; }

/*# sourceMappingURL=test.css.map */

@mixin mybox-base($font-color:#1a1a1a, $bg-color:#e4e4e4) {
  width: 60px;
  height: 26px;
  color: $font-color;
  background-color: $bg-color;
}

.mybox {
  @include mybox-base;
}

@mixin my-box($shadows...) {
  box-shadow: $shadows;
}

.shadow-box {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}