最近在使用 Sass 时，我一直在扩展类来代替变量。
例如：
- 使用变量
$small-font: 12px
p {
font-size: $small-font
}
- 延长课程
.small-font {
font-size:12px;
}
p {
@extend .small-font;
}
扩展类的优点是它可以更容易地使您的代码响应。例如，我可以包装 .small-font一个媒体查询，这对于变量是不可能的。
我的问题是：以这种方式使用扩展类有什么缺点吗？我知道输出倾向于将所有类集中在一起（这会使调试更加麻烦），但是还有其他潜在问题吗？
有几个问题。一是它的疯狂滑坡性质。这将作为维护问题回来咬你。每个属性的类作为代码组织方案没有意义。这并不意味着你离得很远——@extend 非常适合这样的事情，在合理的范围内。
原因是关键：你的分组作为分组应该是有意义的。虽然 html 样式的内容语义对于 @extends 并不重要，但仍然应该有语义组织感。我已经看到了“视觉语义”这个术语。你的命名应该超越描述效果，而是描述它的视觉原因。不是 %yellow，而是 %highlight-text。不是%red，而是%warning。不是什么，而是为什么。
另一个问题是级联。输出代码的顺序非常重要，因为它会影响级联（这是 CSS 的重要组成部分）。使用这种方法，您会发现自己经常与级联作斗争——因为您放弃了对代码顺序的控制。@extend 非常适合广泛而简单的默认分组，但它不适合级联覆盖。