Sass @mixin 和 @include

定义和使用

@mixin 指令使您可以创建要在整个网站中重复使用的 CSS 代码。

创建 @include 指令可以帮您使用（包括）mixin。

用 @mixin 指令定义 mixin。

Sass @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 重要文本 {} 和 @mixin 重要文本 {} 被视为相同的 mixin！

使用 Mixin

@include 指令用于包含混入。

Sass @include mixin 语法：

selector {
  @include mixin-name;
}

下面示例引用 @include 导入的 "important-text" 文件的混合：

.danger {
  @include important-text;
  background-color: green;
}

Sass 编译后会将以上内容转换为普通 CSS：

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

一个 mixin 还可以包括其他 mixin：

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

将变量传递给 Mixin

Mixins 接受参数。这样，您可以将变量传递给 mixin。

以下是定义带参数的 mixin 的方法：

Sass 语法：

// 用两个参数定义 mixin 
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 用两个值调用mixin
}

.myNotes {
  @include bordered(red, 2px); // 用两个值调用mixin
}

注意，参数被设置为变量，然后用作 border 属性的值（颜色和宽度）。

编译后，CSS 将如下所示：

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

Mixin 的默认值

您还可以为 mixin 变量定义默认值：

Sass 语法：

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

然后，您只需要指定包含 mixin 时更改的值：

.myTips {
  @include bordered($color: orange);
}

Mixin 的属性

mixin 的另一个好用法是用于 CSS 兼容性前缀。

这是一个 transform 示例：

Sass 语法：

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

编译后，CSS 将如下所示：

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

Sass @mixin 和 @include

定义和使用

使用 Mixin

将变量传递给 Mixin

Mixin 的默认值

Mixin 的属性

相关页面