在前端开发中，SASS 是一种非常实用的样式预处理器，通过 SASS，我们可以使用变量、嵌套规则、mixin 等功能，来更加方便、快捷地书写样式代码。但是，可能你在使用 SASS 时会遇到一个很奇怪的问题，就是使用嵌套选择器时，样式会失效。这究竟是为什么呢？本篇文章将介绍这个问题的原因和解决方法。
原因分析
首先，我们需要了解一下 CSS 的层级关系。在 CSS 中，父元素和子元素之间的关系可以通过选择器来表示，例如：
-- ------ -- ---- -- -- ------ -- ---- --- --
但是，当我们使用 SASS 来书写样式时，可能会使用嵌套选择器来表达父子元素的关系，例如：
-- ------ --
---- -
-- ------ --
--- -
-- ----- --
------ -----
-
-看起来这种写法非常清晰、简洁。但是问题也就在这里出现了。上面这段代码会被编译成以下 CSS 代码：
-- ------ -- ---- -- -- ------ -- ---- --- - -- ----- -- ------ ----- -
发现了问题吗？在上面的 CSS 代码中，body 和 body div 的权重是相同的，都是 1。这样一来，就有可能出现样式失效的问题。例如，当我们写出以下代码时：
---------- -
------ -----
---- -
------ ----
-
-这里的 .container 和 .box 都会被编译成 class 选择器，导致两者权重相同。这样一来，当我们在 HTML 页面中写出以下代码时：
---- ------------------ ---- ------------------ ------
.box 元素的宽度并不会生效，因为 .container 和 .box 的权重是相同的，都是 10（.container 的权重为 1，.box 的权重为 1）。
解决方法
那么，如何解决上述问题呢？其实，解决方式非常简单，只需要使用 & 符号即可。这个符号可以帮助我们将父元素选择器插入到子元素选择器中。例如：
---------- -
------ -----
- ---- -
------ ----
-
-这样一来，生成的 CSS 代码就会是：
---------- - ------ ----- - ---------- ---- - ------ ---- -
这样写法不仅可以避免样式失效的问题，还可以更加清晰地表示父子元素的关系。
总结
SASS 是一种非常有用的样式预处理器，但是在使用嵌套选择器时，可能会导致样式失效的问题。这是因为在 CSS 中，父元素和子元素之间的选择器权重是不同的，而在 SASS 中，嵌套选择器会被编译成相同的选择器。为了解决这个问题，我们可以使用 & 符号将父元素选择器插入到子元素选择器中。这样写法可以避免样式失效的问题，也可以更加清晰地表示父子元素的关系。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a64f8248841e98942e89d9