5.Sass @mixin 与 @include

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

定义一个混入

混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }

/* 创建一个名为 "important-text" 的混入 */
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。

使用混入

@include 指令

/* 使用混入 */
selector {
  @include mixin-name;
}

例：

/* 将important-text混入 */
.danger {
  @include important-text;
  background-color: green;
}

// 转化为CSS ==>
.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

混入中也可以包含混入

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

向混入传递变量

可变参数

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

可变参数

浏览器前缀使用混入

上一篇：4.Sass @import与Partials >>

下一篇：6.Sass @extend 与 继承 >>