Sass混合的使用

Posted 2021-06-03 书和咖啡

本节我们学习 Sass 中的混合，Sass 中的混合是通过 @mixin 指令来定义的，混合允许我们定义可以在整个样式表中重复使用的样式，避免使用无语意的类。混合可以包含所有的 CSS 规则和任何其他在 Sass 文档中被允许使用的内容。

定义混合

Sass 中可以通过 @mixin 指令定义混合，@mixin 后面接混合的名称和可选的 arguments 参数，以及混合的内容块。

示例：

例如创建一个名为 my-text 的混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
}

此时我们运行代码，上述混合是不会被编译到 CSS 代码中的，只有当我们使用了这个混合时，才会被编译。

注意，Sass 的连接符号 - 和下划线 _ 是相同的，也就是说 my-text 与 my_text 是一样的。

混合的使用

混合定义好后，我们就可以在选择器使用混合，可以通过 @include 来使用这混合。@include 调用会把混合器中的所有样式提取出来放在 @include 被调用的地方。

示例：

例如我们使用上面定义好的混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
}

p{
    @include my_text();
}

编译成 CSS 代码：

p{
  font-size: 12px;
  color: #fdef92;
  font-weight: bold;
}

从上述代码可以看出，在选择器 p 中的所有样式属性全部来自 my-text 这个混合器。

混合中除了使用样式属性，还可以包含选择器，当一个包含选择器的混合通过 @include 包含在一个父选择器中时，在混合中的选择器最终会被嵌套在父选择器中。

示例：

例如我们定义一个混合，这个混合中包含一个选择器 .child，然后在另一个选择器中使用这个混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
    .child{
        background-color: #68f7f7;
    }
}

.other{
    @include my_text();
}

编译成 CSS 代码：

.other {
  font-size: 12px;
  color: #fdef92;
  font-weight: bold;
}
.other .child{
  background-color: #68f7f7;
}

我们在 .other 选择器中调用 my-text，然后可以看到在编译成的 CSS 代码中，.child 选择器变为了 .other 选择器的后代选择器。

总结

虽然混合很好用，但是也不能乱用，大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以我们要注意混合的使用场景，如果一段代码使用的频率很高，那么就可以将这段代码构成一个混合。

判断一组属性是否应该组合成一个混合，一条经验法则就是你能否为这个混合想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，那么往往能够构造一个合适的混合器，反之这个混合可能并不适合。