在 CSS 中创建基类和操纵唯一值的类是很常见的。字体图标库是一个非常常见的例子,例如 Font Awesome:
<i class="fa fa-bicycle"></i>
这是有道理的,但是当 SASS 进入画面时,您可以使用 extend
功能。
在 SASS 中:
%glyph {
... stuff ...
}
.glyph-1 {
@extend %glyph;
... unique stuff ...
}
.glyph-2 {
@extend %glyph;
... unique stuff ...
}
这导致 CSS 类似于:
.glyph-1, .glyph-2, .glyph-<n> {
... contents of %glyph ...
}
.glyph-<number> {
... the unique stuff for each <number> ...
}
这样做的好处是我现在只需要在我的 HTML 中调用 glyph-1
。
除了使 HTML 保持“更精简”之外,从开发的 Angular 来看,SASS 版本更具可读性和可维护性 (IMO)。但是编译后的 CSS 肯定更大(从人的 Angular 来看毫无意义,因为正在使用 SASS,但在浏览器方面可能很重要)。
使用一种方法与另一种方法相比是否存在明显的性能问题,这可能会影响首选方法?
最佳答案
我们可以考虑有两种方法来做到这一点:
- 带有@extend 的单个类,就像您的示例一样,您有一个包含基类样式的类型类。
- 多个类(也称为链接),如下例所示
-
.button {}
.button--large {}
.button--primary {}
<button class="button button--large button--primary"></button>
单类方式很容易理解。
多类方式最适合具有多个修饰符的模块,这些修饰符旨在混合和匹配。但是,它的一个问题是它是重复的,您需要注意修饰符类的顺序。
结合前两者优点的另一种方法是将修饰符的概念分离为(变体、修饰符和状态)。所以按照类似 this 的方式进行操作.如果变体是一种类型,则应该有一个,并且您可以像字形类一样使用 extend 。修改器应该更新一些简单的属性。状态类似于 is-disabled。
所以我们得到了两个好处:
您可以添加简单的修饰符:
<button class="btn -color-red -size-large -shape-round">
您可以像在字形示例中一样继续使用变体类。
关于使用 SASS 时使用 2 个类与 `extend` 的 CSS 性能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39216180/