在 Sass 中，我们经常会嵌套多层样式规则来控制样式的层次感和结构性。但是，有些情况下我们需要样式规则跳出嵌套规则，例如全局样式或者需要控制页面元素的层级，这时 at-root 指令就非常有用了。
at-root 指令简介
at-root 指令是 Sass 中的一种控制指令，用于控制样式规则的输出位置。通常情况下，样式规则会按照嵌套的结构输出，但当我们需要跳出嵌套规则时，就可以使用 at-root 指令。
at-root 指令语法
使用 at-root 指令的语法如下：
-------- - - -
at-root 指令使用方法
at-root 指令可以被用于样式规则或者属性值。下面我们将分别介绍这两种情况下的 at-root 使用方法。
控制样式规则的输出位置
在 Sass 中，样式规则通常会按照嵌套结构输出。如果我们需要某个样式规则不按照嵌套结构输出，而是跳出当前的嵌套规则，可以使用 at-root 指令。
例如，我们需要添加一个全局样式，可以使用以下代码：
-- ---- --
------- -
---
-------- -
----------------- -----
-
--- ---- --- -- ------- - --- - ----------------- -----
在上面的例子中，我们使用了 at-root 指令将 background-color 属性输出到了样式规则之外。
控制属性值的输出位置
除了控制样式规则的输出位置，at-root 指令还可以用于控制属性值的输出位置。例如，我们需要控制页面元素的层级时，可以使用 at-root 指令。
例如，我们需要控制一个 h1 标签的层级，可以使用以下代码：
-- ---- --
---------- -
---
-------- -- -
---------- -----
-
--- ---- --- -- ---------- - --- - -- - ---------- ----- -
在上面的例子中，我们使用了 at-root 指令将 h1 标签的属性输出到了样式规则之外。
at-root 指令总结
at-root 指令是 Sass 中很有用的一种控制指令，可以帮助我们控制样式规则或属性值的输出位置。无论是添加全局样式，还是控制页面元素的层级，都可以使用 at-root 指令。
通过掌握 at-root 指令的使用方法，我们可以更好地控制样式的层次感和结构性，进一步提高我们的前端开发效率。
示例代码
以下是一个使用 at-root 指令的示例代码：
------- -
-------- -
----------------- -----
-
--------- -
---
-
--------- -
---
-
-------- - ----------------- ----- - ------- --------- - - ------- --------- - -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646e04c9968c7c53b0c9edfe