SASS：扩展类vs变量

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

例如：

-使用变量

$small-font: 12px

p {
font-size: $small-font
}

-扩展类

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

p {
@extend .small-font;
}

扩展类的优点是它使代码更容易响应。例如，我可以在媒体查询中包装

.small font

，这在变量中是不可能的

我的问题是：以这种方式使用扩展类有什么缺点吗？

---

我知道输出倾向于将所有类合并在一起（这会使调试更加繁琐），但是否还有其他潜在问题？

有一些问题。其中一个原因很简单，那就是它的疯狂的滑坡性质。这将作为维护问题再次困扰您。每个属性一个类作为代码组织方案是没有意义的。这并不意味着你离这里很远-@extend对于这样的东西来说是很好的，这是合理的

原因是关键：你的分组应该是有意义的分组。虽然html样式的内容语义对于@extends并不重要，但仍然应该有一种语义组织的感觉。我看到“视觉语义学”一词在这里流传。你的命名应该不仅仅是描述效果，而是描述其视觉原因。不是%黄色，而是%高亮显示文本。不是%红色，而是%警告。不是什么，而是为什么

---

另一个问题是级联。输出代码的顺序非常重要，因为它会影响级联（这是CSS的基本部分）。使用这种方法，您将发现自己在定期地对抗级联——因为您将放弃对代码顺序的控制@extend对于广泛而简单的默认分组非常有用，但它在级联覆盖方面并不擅长。

有一些问题。其中一个原因很简单，那就是它的疯狂的滑坡性质。这将作为维护问题再次困扰您。每个属性一个类作为代码组织方案是没有意义的。这并不意味着你离这里很远-@extend对于这样的东西来说是很好的，这是合理的

原因是关键：你的分组应该是有意义的分组。虽然html样式的内容语义对于@extends并不重要，但仍然应该有一种语义组织的感觉。我看到“视觉语义学”一词在这里流传。你的命名应该不仅仅是描述效果，而是描述其视觉原因。不是%黄色，而是%高亮显示文本。不是%红色，而是%警告。不是什么，而是为什么

---

另一个问题是级联。输出代码的顺序非常重要，因为它会影响级联（这是CSS的基本部分）。使用这种方法，您将发现自己在定期地对抗级联——因为您将放弃对代码顺序的控制@extend非常适合广泛而简单的默认分组，但它不擅长级联覆盖。

谢谢！这就很好地解释了。谢谢！这很好地解释了这一点。