在使用 SASS 进行前端开发时，我们经常会遇到 "&-" 这个符号，它表示的是父级选择器。但是在编译的时候，这个符号会出现一些问题，本文将会详细讲解这个问题的出现原因以及解决方法。
问题描述
在 SASS 中，我们可以使用 "&" 符号来表示父级选择器，例如：
------- -
------- -
------ ----
-
-编译后的 CSS 代码为：
------------- - ------ ---- -
这个例子中，"&" 符号将父级选择器 ".parent" 和子级选择器 "-child" 连接起来，生成了 ".parent-child" 的选择器。
但是，如果父级选择器中包含了 "&" 符号，例如：
------- -
------- -
------ ----
------------ -
---------- -----
-
-
-编译后的 CSS 代码为：
------------------------ - ------ ---- ---------- ----- -
这个例子中，"&" 符号在子级选择器中出现了两次，导致编译后的选择器 ".parent-child-grandchild" 不符合预期。
问题原因
在编译 SASS 代码时，编译器会将 "&" 符号替换为父级选择器，例如：
------- -
------- -
------ ----
-
-编译后的代码为：
------------- - ------ ---- -
编译器将 "&" 符号替换为了父级选择器 ".parent"，生成了 ".parent-child" 的选择器。
但是，在子级选择器中出现 "&-" 这个组合符号时，编译器会将它识别为一个新的选择器，例如：
------- -
------- -
------ ----
------------ -
---------- -----
-
-
-编译后的代码为：
------------------------ - ------ ---- ---------- ----- -
编译器将 "&-" 符号识别为了一个新的选择器 "-grandchild"，生成了 ".parent-child-grandchild" 的选择器。
解决方法
为了解决这个问题，我们可以使用 "@at-root" 指令来避免 "&-" 符号的重复替换。例如：
------- -
------- -
------ ----
-------- ------------ -
---------- -----
-
-
-编译后的代码为：
------------- - ------ ---- - ------------------------ - ---------- ----- -
在这个例子中，"@at-root" 指令将 "&-" 符号的替换限制在了父级选择器中，避免了重复替换的问题。
除了 "@at-root" 指令，我们还可以使用 "@extend" 指令来避免 "&-" 符号的重复替换。例如：
------- -
------- -
------ ----
-
-
----------- -
---------- -----
------- --------------
-编译后的代码为：
-------------- ----------- - ------ ---- - ----------- - ---------- ----- -
在这个例子中，"@extend" 指令将 ".grandchild" 选择器扩展到了 ".parent-child" 选择器中，避免了重复替换的问题。
总结
在使用 SASS 进行前端开发时，"&-" 符号的重复替换问题是一个常见的问题。为了避免这个问题，我们可以使用 "@at-root" 指令或者 "@extend" 指令来限制 "&-" 符号的替换范围，从而避免重复替换的问题。希望本文的介绍能够帮助读者更好地理解 SASS 的编译机制，提高前端开发的效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65c1f334add4f0e0ffbf11cc