SASS 是一种 CSS 预处理器，它可以帮助前端开发人员更加高效地编写样式代码。其中，@content 指令是 SASS 中一个重要且常用的功能，它允许我们将一段规则块中的代码嵌套到另一个规则块中，进而实现代码的重用和灵活性。
@content 指令的基础语法
在 SASS 中，@content 指令通常用于 mixin 中，其语法格式如下：
@mixin mixin-name {
// 此处为 mixin 中的一些代码
@content;
}其中，@mixin 定义一个函数式混入（mixin），它可以接受任意个参数，并生成一段 CSS 样式代码。而在 mixin 中，使用 @content 可以将调用 mixin 时传递的内容嵌套到 mixin 中。
下面是一个简单的例子：
-- -------------------- ---- -------
------ -------------- -
----------------- -------
-------------- ----
-------- -----
------ ------
---------
-
---------- -
-------- ------------- -
---------- -----
------------ -----
-
-
-------- -
-------- ----------- -
---------- -----
------------ -------
-
-在上述例子中，我们定义了一个按钮 mixin，它接受一个颜色参数 $color，设置了按钮的一些基本属性。同时，使用 @content 指令将调用 mixin 时传递的内容嵌套到按钮样式中。
在 .btn-green 和 .btn-red 中，我们分别调用了按钮 mixin，并传递了不同的颜色参数。同时，使用 {} 包裹的代码块将传递的内容嵌套到了 mixin 中，进而实现了不同的样式效果。
@content 指令的高级用法
除了基础语法外，@content 指令还有一些高级用法，例如：
1. @content 能够传递参数
在 mixin 中，@content 还可以带上参数，这些参数可以在传递内容时进行定义。下面是一个示例：
-- -------------------- ---- -------
------ -------------- -
----------------- -------
-------------- ----
-------- -----
------ ------
---------------------------
-
---------- -
-------- ------------- -
---------- -----
------------ -----
-- ---------- --
--------- -
-------- -------------------
----------------- -------
-------- ----
-------- -------------
-
-
-在上述例子中，我们在 mixin 中使用 @content("button-content") 定义了一个带有参数的 @content。然后，在调用 mixin 时，我们可以在嵌套的内容中使用 $args 变量名，引用在 @content 中定义的参数，并使用相应的参数值。
2. @content 可以被嵌套
和嵌套的 Sass 规则一样，@content 指令也可以被嵌套。例如：
-- -------------------- ---- -------
------ ------------------- -
----------------- ---------
------ ------ --- ----------- ------ -
------ ----
------- - -----
---------
-
-
---------- -
-------- --------------- -
------ ------
-
-在上述例子中，我们在 mixin 中嵌套了 @media 规则，并在其中使用 @content。当调用 mixin 并传递内容时，这些内容将被嵌套到 @media 规则中。
这个示例同样说明了，对于 mixin 的调用，可以传递一个嵌套块，而不仅限于简单的参数列表。
总结
@content 指令是 SASS 中一个功能强大且灵活的功能，它允许我们定义 mixin，将嵌套的内容嵌套到规则块中，并通过高级用法进一步扩展其灵活性和可用性。了解 @content 指令的使用方法，能够让我们在代码中更加方便地进行代码重用，提升样式表的易用性和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503acd695b1f8cacd073da7