最近使用Sass时,我一直在扩展类作为变量的替代。
例如:
- 使用变量
$small-font: 12px
p {
font-size: $small-font
}
- 扩展课程
.small-font {
font-size:12px;
}
p {
@extend .small-font;
}
扩展类的优点是可以更轻松地使代码响应。例如,我可以将.small-font
包装在媒体查询中,这对于变量是不可能的。
我的问题是:以这种方式使用扩展类是否有任何缺点? 我知道输出倾向于将所有类混合在一起(这会使调试变得更麻烦),但是还有其他潜在的问题吗?
答案 0 :(得分:6)
有一些问题。一个是它的疯狂滑坡性质。这会让你觉得它是一个维护问题。作为代码组织方案,每个属性类只是没有意义。这并不意味着你离我很远 - @extend非常适合这样的事情。
原因是关键:你的分组应该像分组一样有意义。虽然html风格的内容语义对于@extends并不重要,但仍然应该有一种语义组织感。我已经看到了“视觉语义学”这个术语。您的命名应该不仅仅是描述效果,而是描述它的视觉原因。不是%黄色,而是%高亮文本。不是%红色,而是%警告。不是什么,而是为什么。
另一个问题是级联。输出代码的顺序非常重要,因为它会影响级联(这是CSS的一个重要部分)。通过这种方法,您将发现自己定期与级联作斗争 - 因为您放弃了对代码顺序的控制。 @extend非常适合广泛和简单的默认分组,但它在级联覆盖方面没有任何好处。