SCSS 之 mixin 和 extend

变量

定义变量

$color-white: white;

使用变量

body {
  background-color: $color-white;
}

@mixin 与 @include

定义 mixin

/*声明mixins*/
@mixins border {
  border: 1px solid #red;
}

使用 mixin

/*使用mixins*/
.my-div {
  @include border;
}

向 mixin 传递变量

混入可以接收参数。 我们可以向混入传递变量。 定义可以接收参数的混入：

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px); // 调用混入，并传递两个参数
}
.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}

以上实例的混入参数为设置边框的属性 (color 和 width) 。 将以上代码转换为 CSS 代码，如下所示：

.myArticle {
  border: 1px solid blue;
}
.myNotes {
  border: 2px solid red;
}

可变参数

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。 例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译后的 css 代码

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

@extend 与 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。 如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report {
  @extend .button-basic;
  background-color: red;
}
.button-submit {
  @extend .button-basic;
  background-color: green;
  color: white;
}

编译后的 css 代码

.button-basic,
.button-report,
.button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report {
  background-color: red;
}
.button-submit {
  background-color: green;
  color: white;
}

使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class="button-basic button-report" ，只需要设置 class="button-report" 类就好了。 @extend 很好的体现了代码的复用。