什么是 @content 规则？
SASS 是一种 CSS 预处理语言，它提供了许多方便的语法和功能来帮助我们更高效地编写 CSS。其中一个非常有用的功能就是 @content 规则。
@content 规则允许我们在定义 mixin 时，将 mixin 中的代码块作为参数传递给 mixin，从而实现代码的重用和灵活性。具体来说，@content 规则可以让我们在 mixin 中插入任意的 CSS 代码块，这些代码块会在 mixin 被调用时被插入到 CSS 文件中。
如何使用 @content 规则？
下面是一个使用 @content 规则的例子：
// javascriptcn.com 代码示例
@mixin my-mixin {
background-color: red;
@content;
}
.my-class {
@include my-mixin {
font-size: 16px;
}
}在上面的例子中，我们定义了一个名为 my-mixin 的 mixin，其中包含了一个 @content 规则。在调用 my-mixin 时，我们传递了一个代码块作为参数，这个代码块会被插入到 @content 规则的位置。
在 .my-class 中，我们使用 @include 指令调用了 my-mixin，并传递了一个代码块，这个代码块包含了一个 font-size 属性。当编译成 CSS 文件时，.my-class 的样式将包含 background-color: red 和 font-size: 16px 两个属性。
常见问题解决
问题：@content 规则没有被调用
有时候，我们在 mixin 中定义了 @content 规则，但是在调用 mixin 时，@content 规则却没有被插入到 CSS 文件中。这通常是因为我们没有在调用 mixin 时传递代码块参数。
解决方案：传递代码块参数
在调用 mixin 时，我们需要传递一个代码块作为参数，这个代码块会被插入到 @content 规则的位置。如果我们没有传递代码块参数，那么 @content 规则就会被忽略。
问题：@content 规则被重复插入
有时候，我们在 mixin 中定义了 @content 规则，但是在调用 mixin 时，@content 规则却被重复插入到 CSS 文件中。这通常是因为我们在 mixin 中使用了 @content 规则，并且在调用 mixin 时也使用了 @content 规则。
解决方案：避免重复使用 @content 规则
在 mixin 中使用 @content 规则时，我们应该避免在调用 mixin 时再次使用 @content 规则。如果我们在 mixin 和调用 mixin 的地方都使用了 @content 规则，那么 @content 规则就会被重复插入到 CSS 文件中。
总结
@content 规则是 SASS 中非常有用的一个功能，它可以让我们在 mixin 中插入任意的 CSS 代码块，从而实现代码的重用和灵活性。在使用 @content 规则时，我们需要注意传递代码块参数并避免重复使用 @content 规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510f48595b1f8cacd9576d4