Sass @mixin与@include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。

定义一个混入

// 在style里先定义
 @mixin rowStyle() {
    padding: 0 px2rem(36);
    color: $text-color;
    width: px2rem(473-36-36);
  }

使用一个混入

// 使用
  .ck-row {
    font-size: $text-size;
    @include rowStyle();
}

使用一个混入里面再包含一个混入

// 在style里先定义
 @mixin rowStyle() {
    padding: 0 px2rem(36);
    color: $text-color;
    width: px2rem(473-36-36);
    @include anotherRowStyle();
  }
// 使用
  .ck-row {
    font-size: $text-size;
    @include rowStyle();
}

向混入里传入变量

// 在style里先定义
 @mixin rowStyle($color, $width) {
    border: $widht solid $color;
  }
// 使用
  .ck-row {
    font-size: $text-size;
    @include rowStyle(#fff, 1px);
}

向混入里传入变量（定义默认值）

// 在style里先定义
 @mixin rowStyle($color: red, $width: 1px) {
    border: $widht solid $color;
  }
// 使用
  .ck-row {
    font-size: $text-size;
    @include rowStyle(#fff, 1px);
}

向混入里传入变量（变量参数不确定）

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。

@mixin rowStyle($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include rowStyle(0px 4px 5px #666, 2px 6px 10px #999);
}