最近在使用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非常适合广泛和简单的默认分组,但它在级联覆盖方面没有任何好处.