在前端开发中，使用 SASS 可以使代码更加清晰有序。然而，在实际开发中，我们会遇到样式覆盖的问题，即一个选择器对同一个元素的样式进行多次定义，造成了样式的混乱和不可控。本文将从 SASS 的层叠性和选择器权重两个方面分析样式覆盖问题，并提供解决方案和实用技巧。
1. SASS 的层叠性
层叠性是指当相同的选择器对同一个元素定义多个样式时，SASS 如何处理这些样式的优先级。
1.1 嵌套样式的层叠性
在 SASS 中，我们可以使用嵌套样式定义 CSS。假设我们有以下代码：
.nav {
margin: 20px;
ul {
padding: 10px;
}
}编译后的 CSS 代码为：
.nav {
margin: 20px;
}
.nav ul {
padding: 10px;
}这里就涉及到了 SASS 的层叠性问题。由于 ul 在 .nav 中，所以 .nav ul 对 ul 上的样式具有优先级。但假设我们后续又添加了另一个样式：
ul {
padding: 0;
}这里的 ul CSS 选择器并非在 .nav 内部，我们应该预期它的优先级高于 .nav ul，在实际应用中 SASS 总是会选择优先级最高（即选择器权重最大）的样式规则。但是，在实际编译中，输出的结果并没有预期的效果。因为在编译后，.nav ul 等于 .nav>ul，所以我们需要使用 & 表示 ul 处在 .nav 内，代码如下：
-- -------------------- ---- -------
---- -
------- -----
---- -
-------- -----
-
-
-- -
-------- --
-这样编译后的 CSS 代码就能达到预期的效果了。
1.2. 混合器的层叠性
在 SASS 中，我们可以使用混合器大幅度减少代码的重复。但是在使用混合器时，也需要注意层叠性的问题。假如我们有以下代码：
-- -------------------- ---- -------
------ ------------ -
------- -
----------------- -----
-
-
------- -
-------- -------------
----------------- ----
-编译后的 CSS 代码为：
.button:hover {
background-color: blue;
}
.button {
background-color: red;
}这时我们又想要添加一个样式：
.button{
&:active{
background-color:green;
}
}但是这个后添加的混合器中又包含了 &，这就意味着之前的混合器的优先级被覆盖。解决办法是，将之前的混合器也使用 &，代码如下：
-- -------------------- ---- -------
------ ------------ -
------- -
----------------- -----
-
-
------- -
---------
-----------------------
-
-------- -------------
----------------- ----
-这时编译后的 CSS 代码就能达到预期的效果了。
2. 选择器权重
选择器权重是指每个选择器对于样式应用的“重要性”，SASS 会自动计算选择器的权重。当有多个选择器定义了相同的样式规则时，SASS 会选择选择器权重最高的规则。
2.1 选择器权重的计算
选择器权重根据以下选择器组成的特征而计算：
- 标签选择器、伪元素选择器和关系选择器，权重为1。
- 类选择器、属性选择器、伪类选择器，权重为10。
- ID 选择器，权重为100。
- 在声明中使用 !important，权重为最高，优先级最高。
权重会与选择器内部定义的每一个选择器中组成的所有元素保持一致，一起组成选择器的权重。例如：
.section div p#myid { }
/* 权重值: [0,0,1,1] + [0,0,1,0] + [0,10,0,0] + [100,0,0,0] */这里的选择器权重为 [100, 10, 2, 1]。
2.2 选择器权重的应用
SASS 在计算选择器权重的时候，会把它们组合起来，生成一个实际的权重数组。例如：
/* 大多数浏览器的默认样式 */
* {
margin: 0;
padding: 0;
list-style-type: none;
}这个通配符选择器 * 会应用到每一个元素上。这个样式规则的权重为 [0,0,0,0] + [0,0,0,0] + [0,0,1,0]，根据选择器权重规则，权重的值应该是 [0,0,1,0]。所以这个规则的具体作用等价于：
-- -------------------- ---- ------- --- -- - ------- -- -------- -- ---------------- ----- - -- - ------- -- -------- -- ---------------- ----- - - - ------- -- -------- -- -
3. 解决方案和实用技巧
3.1 修改 HTML 结构
在不修改样式表的情况下，你可以通过修改 HTML 结构来覆盖 CSS 样式。假设有如下样式无法覆盖的问题：
/* SASS 样式表 */
p {
color: red;
font-weight: 700;
}无法覆盖这个样式的解决方法是，为相应的 HTML 元素设置 class，以指定特定的样式，例如：
<!-- HTML --> <p class="green">不受样式干扰的文本</p>
/* SASS 样式表 */
.green {
color: green;
}3.2 提高选择器权重
可以通过以下技巧来提高选择器的权重：
- 在样式规则中使用 ID 选择器，由于 ID 选择器具有最高的权重，所以它会覆盖其他选择器中的样式规则。但是滥用 ID 选择器可能会造成样式臃肿，也会让样式难以复用。
- 在样式规则中添加更多的选择器组合，这样就能提高它们的权重值。例如：
/* SASS 样式表 */
header ul li a {
font-size: 1.5em;
}这个规则的权重为 [0,0,3,1] + [0,10,0,0] + [0,0,1,0] + [0,0,0,1]，相对于只使用一个元素名称或一个类选择器定义的样式规则，它的权重值要高得多。
3.3 使用 !important
在必要的情况下，可以使用 !important 属性来强制覆盖在样式表中定义的样式规则：
/* SASS 样式表 */
p {
color: red !important;
}这样的问题在于，一旦使用 !important，将很难撤销它，不建议在大量代码中使用。
结论
样式覆盖是前端开发中常见的问题，在 SASS 中，它可以通过选择器权重和层叠性的特性得到解决。使用上述提及的技巧，你应该能够使用 SASS 写出清晰、有序的样式表，并在层叠性和权重计算方面避免潜在的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736fb99317fbffedf073630