SASS：扩展类与变量

【问题标题】：SASS: Extending Classess vs VariablesSASS：扩展类与变量
【发布时间】：2012-09-08 09:09:05
【问题描述】：

最近在使用 Sass 时，我一直在扩展类来替代变量。

例如：

-使用变量

$small-font: 12px

p {
font-size: $small-font
}

-扩展类

.small-font {
font-size:12px;
}

p {
@extend .small-font;
}

扩展类的优势在于它可以更轻松地使您的代码具有响应性。例如，我可以将.small-font 包装在媒体查询中，这对于变量是不可能的。

我的问题是：以这种方式使用扩展类有什么缺点吗？我知道输出倾向于将所有类集中在一起（这会使调试更加麻烦），但是还有其他潜在问题吗？

【问题讨论】：

标签： sass

【解决方案1】：

有几个问题。一是它的疯狂滑坡性质。这将作为维护问题回来咬你。每个属性的类作为代码组织方案没有意义。这并不意味着你离得很远——@extend 非常适合这样的事情，在合理的范围内。

原因是关键：您的分组作为分组应该是有意义的。虽然 html 样式的内容语义对于 @extends 并不重要，但仍然应该有语义组织感。我已经看到了“视觉语义”这个术语。你的命名应该超越描述效果，而是描述它的视觉原因。不是 %yellow，而是 %highlight-text。不是%red，而是%warning。不是什么，而是为什么。

另一个问题是级联。输出代码的顺序非常重要，因为它会影响级联（这是 CSS 的重要组成部分）。使用这种方法，您会发现自己经常与级联作斗争——因为您放弃了对代码顺序的控制。 @extend 非常适合广泛而简单的默认分组，但它不适合级联覆盖。

【讨论】：

谢谢！这完美地解释了它。