SASS 中的 “@content” 用法详解
SASS 是一种 CSS 预处理器，它可以让我们在编写 CSS 时使用变量、嵌套、函数等高级语言特性。其中，“@content” 是 SASS 中一个非常有用的指令，它可以让我们在定义 mixin 时接受一段代码块，并在 mixin 内部使用。
“@content” 的基本用法
在 SASS 中，我们可以使用 mixin 来定义一些可复用的样式代码。例如，我们可以这样定义一个 mixin：
@mixin box-shadow($x, $y, $blur, $color) {
box-shadow: $x $y $blur $color;
}这个 mixin 接受四个参数，分别是水平偏移量、垂直偏移量、模糊半径和阴影颜色。我们可以在需要使用阴影的地方调用这个 mixin，例如：
.box {
@include box-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}这样就会给 .box 元素添加一个黑色阴影。
但是，如果我们希望让这个 mixin 不仅仅是添加阴影，还可以添加其他样式，该怎么办呢？这时，“@content” 就派上用场了。我们可以在 mixin 中使用 “@content” 指令，它会接受 mixin 调用时传递的代码块。例如：
@mixin box {
border: 1px solid #000;
padding: 10px;
@content;
}这个 mixin 中使用了 “@content” 指令，它会接受一个代码块，并在代码块之前添加一些样式。我们可以这样调用这个 mixin：
.box {
@include box {
background-color: #f00;
}
}这样就会给 .box 元素添加一个黑色边框、10px 的内边距和红色背景色。这里的代码块就是传递给 mixin 的内容，它会被插入到 mixin 中使用 “@content” 的地方。
“@content” 的高级用法
除了上面介绍的基本用法，还有一些高级用法可以让 “@content” 更加强大。
- 检查是否有代码块
有时候我们希望 mixin 能够接受代码块，但是如果没有传递代码块，我们又不希望 mixin 报错。这时可以使用 “@content” 的 exists() 函数来检查是否有代码块。例如：
@mixin box {
border: 1px solid #000;
padding: 10px;
@if (exists($content)) {
@content;
}
}这个 mixin 中使用了 exists() 函数来判断是否有代码块传递进来。如果有，就执行代码块中的内容；如果没有，就不执行。
- 传递参数
有时候我们希望在 mixin 中使用 “@content”，并且还想给代码块传递一些参数。这时可以使用 call() 函数来实现。例如：
-- -------------------- ---- -------
------ -------- -
----------------- ----
--------- -
------ -----
--
--- ------------------ -
---------------- -----
-
-这个 mixin 中使用了 call() 函数来调用代码块，并给它传递了一个 $bg 参数。代码块中的样式会应用到 mixin 中定义的样式上，形成一个完整的样式。我们可以这样调用这个 mixin：
.box {
@include box(#f00) {
padding: 10px;
}
}这样就会给 .box 元素添加一个红色背景色和白色文本颜色。
总结
“@content” 是 SASS 中一个非常有用的指令，它可以让我们在 mixin 中接受一段代码块，并在 mixin 内部使用。除了基本用法之外，还有一些高级用法可以帮助我们更好地使用 “@content”。掌握这些用法，可以让我们更加灵活地编写样式代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66066750d10417a22249aaef