SASS 中的 “@at-root” 指令详解
在 SASS 中，我们经常会使用“@at-root”指令来控制样式的作用域。这个指令可以让我们在样式层级嵌套中跳出到最外层，从而控制样式的作用范围，避免样式的污染。
@at-root 的语法
@at-root 指令的语法很简单，只需要在需要跳出的样式块前加上 @at-root 即可。
例如，下面的代码中，我们在嵌套层级中使用了 @at-root 指令来控制样式的作用范围：
.wrapper {
@at-root .box {
width: 100px;
height: 100px;
}
}在这个例子中，我们使用了 @at-root 指令来控制 .box 样式的作用范围，使其不受 .wrapper 样式块的限制。
@at-root 的用途
@at-root 指令在实际开发中有很多用途，下面我们来介绍一些常见的用法。
- 控制样式的作用范围
我们在编写样式时，有时需要控制样式的作用范围，避免样式的污染。这时，我们可以使用 @at-root 指令来跳出当前样式块，从而控制样式的作用范围。
例如，下面的代码中，我们使用了 @at-root 指令来控制 .box 样式的作用范围，使其不受 .wrapper 样式块的限制：
-- -------------------- ---- -------
-------- -
---- -
----------------- -----
-------- ---- -
------ ------
------- ------
-
-
-在这个例子中，.box 样式块中的 @at-root 指令使得 .box 样式不受 .wrapper 样式块的限制，从而控制了样式的作用范围。
- 控制样式的继承关系
在 SASS 中，我们可以使用 @extend 指令来实现样式的继承。但是，在样式层级嵌套中，有时我们需要控制样式的继承关系，这时，我们就可以使用 @at-root 指令来控制样式的继承关系。
例如，下面的代码中，我们使用了 @at-root 指令来控制 .box 样式的继承关系：
-- -------------------- ---- -------
-------- -
---- -
------ ------
------- ------
----- -
----------------- -----
-------- --------- -
------- -----
----------------- -----
-
-
-
--------- -
------- -----
----------------- -----
-
-在这个例子中，我们使用了 @at-root 指令来控制 .box-blue 样式的继承关系，使其继承 .box 样式而不是 .wrapper 样式块中的 .box 样式。
- 控制样式的输出顺序
在 SASS 中，样式的输出顺序是按照样式层级嵌套的顺序输出的。但是，有时我们需要控制样式的输出顺序，这时，我们可以使用 @at-root 指令来控制样式的输出顺序。
例如，下面的代码中，我们使用了 @at-root 指令来控制样式的输出顺序：
-- -------------------- ---- -------
-------- -
---- -
------ ------
------- ------
-------- -
-------- -
----------------- -----
-
--------- -
----------------- -----
-
-
-
-在这个例子中，我们使用了 @at-root 指令来控制 .box-red 和 .box-blue 样式的输出顺序，使其在 .box 样式块之外输出。
总结
@at-root 指令是 SASS 中一个非常有用的指令，它可以帮助我们控制样式的作用范围、继承关系和输出顺序。在实际开发中，我们可以根据需要灵活使用 @at-root 指令，以提高样式的可维护性和可重用性。
示例代码
下面是一个完整的示例代码，供大家参考：
-- -------------------- ---- -------
-------- -
---- -
------ ------
------- ------
----- -
----------------- -----
-------- --------- -
------- -----
----------------- -----
-
-
-
--------- -
------- -----
----------------- -----
-
-------- -
-------- -
----------------- -----
-
--------- -
----------------- -----
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d332f4add4f0e0ffb7d56f