Question

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

例如：

- 使用变量

$small-font: 12px

p {
font-size: $small-font
}

- 扩展课程

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

p {
@extend .small-font;
}

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

我的问题是：以这种方式使用扩展类是否有任何缺点？我知道输出倾向于将所有类混合在一起（这会使调试变得更麻烦），但是还有其他潜在的问题吗？

Answer 1

有一些问题。一个是它的疯狂滑坡性质。这会让你觉得它是一个维护问题。作为代码组织方案，每个属性类只是没有意义。这并不意味着你离我很远 - @extend非常适合这样的事情。

原因是关键：你的分组应该像分组一样有意义。虽然html风格的内容语义对于@extends并不重要，但仍然应该有一种语义组织感。我已经看到了“视觉语义学”这个术语。您的命名应该不仅仅是描述效果，而是描述它的视觉原因。不是％黄色，而是％高亮文本。不是％红色，而是％警告。不是什么，而是为什么。

另一个问题是级联。输出代码的顺序非常重要，因为它会影响级联（这是CSS的一个重要部分）。通过这种方法，您将发现自己定期与级联作斗争 - 因为您放弃了对代码顺序的控制。 @extend非常适合广泛和简单的默认分组，但它在级联覆盖方面没有任何好处。