理解SCSS嵌套与CSS选择器
SCSS作为CSS的预处理器，提供了强大的嵌套功能，极大地提高了样式的可维护性和可读性，尤其是在采用BEM（块-元素-修饰符）等命名规范时。然而，如果不清楚SCSS编译为原生CSS的工作原理，可能会导致样式不生效的问题。
考虑以下场景，我们希望为一个表示情绪的文本设置基础样式（例如边框）和基于具体情绪的特定颜色：
原始SCSS代码示例：
.emotion{
display: flex;
&__text { // 期望为文本设置基础样式
outline: 1px solid blue; // 未生效的样式
&--happy{ // 为快乐情绪设置颜色
color: rebeccapurple;
}
&--sad{ // 为悲伤情绪设置颜色
color: yellow;
}
}
}对应的HTML结构：
立即学习“前端免费学习笔记（深入）”；
<div class="emotion">
<span class="emotion__text--happy">
Happy
</span>
<span class="emotion__happy">
?
</span>
</div>在这个例子中，开发者期望.emotion__text中定义的outline样式能作用于所有emotion__text相关的元素，包括emotion__text--happy。然而，实际运行结果是outline样式并未生效。
问题分析：为什么样式未生效？
问题的核心在于对SCSS编译行为和CSS选择器匹配规则的误解。
-
SCSS编译结果： 当SCSS被编译成CSS时，&__text会生成一个独立的类选择器.emotion__text，而&--happy则会生成.emotion__text--happy。
原始SCSS编译后的CSS大致如下：
.emotion { display: flex; } .emotion__text { /* 这个选择器对应SCSS中的 &__text */ outline: 1px solid blue; } .emotion__text--happy { /* 这个选择器对应SCSS中的 &__text--happy */ color: rebeccapurple; } .emotion__text--sad { /* 这个选择器对应SCSS中的 &__text--sad */ color: yellow; } -
CSS选择器是精确匹配： CSS选择器是精确匹配的。这意味着，一个元素只有当其class属性中明确包含某个选择器所指定的类名时，对应的样式才会生效。
在上述HTML中，<span>Happy</span>元素只具有class="emotion__text--happy"。它不包含emotion__text这个类名。因此，定义在.emotion__text选择器上的outline: 1px solid blue;样式自然不会被应用。CSS并不会将emotion__text--happy理解为“以emotion__text开头”的类名，除非使用特定的属性选择器（例如[class^="emotion__text"]），但这并非此处的意图。
解决方案：明确引入基础类
要解决这个问题，最直接且符合BEM规范的方法是：如果一个元素需要应用基础样式（定义在基础类上）和修饰符样式（定义在修饰符类上），那么它必须在HTML中同时拥有这两个类名。
修改后的HTML代码：
<div class="emotion">
<span class="emotion__text emotion__text--happy">
Happy
</span>
<!-- 可以添加更多元素 -->
<span class="emotion__text emotion__text--sad">
Sad
</span>
</div>SCSS代码保持不变：
.emotion{
display: flex;
&__text {
outline: 1px solid blue; // 现在这个样式会生效
&--happy{
color: rebeccapurple;
}
&--sad{
color: yellow;
}
}
}通过在<span>元素上同时添加emotion__text和emotion__text--happy两个类，outline样式将通过.emotion__text选择器正确应用，而color样式则通过.emotion__text--happy选择器应用。
BEM命名规范与SCSS实践建议
-
BEM核心原则：
- Block（块）： 独立的、可重用的UI组件（如.emotion）。
- Element（元素）： 块的一部分，没有独立意义（如.emotion__text）。
- Modifier（修饰符）： 改变块或元素外观、行为或状态的标志（如.emotion__text--happy）。 BEM规范强调了元素和修饰符是独立的类，它们通过空格分隔在HTML中应用。
-
SCSS中组织BEM样式： 在SCSS中，我们可以优雅地嵌套BEM结构，但务必理解其编译后的CSS选择器。
.emotion { // 块 display: flex; &__text { // 元素 outline: 1px solid blue; // 基础元素样式 // 修饰符嵌套在元素内部，但它们是独立的类，作用于具有相应修饰符的元素 &--happy { // 修饰符 color: rebeccapurple; } &--sad { // 修饰符 color: yellow; } } // 也可以有直接作用于块的修饰符 &--large { font-size: 2em; } }对应的HTML：
<div class="emotion emotion--large"> <span class="emotion__text emotion__text--happy"> Happy Large </span> <span class="emotion__text emotion__text--sad"> Sad </span> </div>
总结与注意事项
- 精确匹配是关键： CSS选择器是精确匹配的。如果样式定义在.class-name上，那么HTML元素必须明确拥有class="class-name"。
- SCSS是预处理器： SCSS的便利性不应模糊CSS底层的工作原理。在编写SCSS时，应始终在脑海中预想其编译成的CSS。
- 开发者工具是好帮手： 在开发过程中，利用浏览器开发者工具检查元素的实际类名和应用的CSS样式，是排查此类问题的最有效方法。它能清晰地展示哪些样式被应用，哪些被覆盖，以及哪些选择器没有匹配到任何元素。
- 遵循BEM规范： BEM命名规范鼓励将基础样式和修饰符样式分离到不同的类中，这有助于提高组件的可维护性和复用性。在HTML中同时应用基础类和修饰符类，是BEM的常见实践。
