使用 SASS 时使用 2 个类与 `extend` 的 CSS 性能？

Question

在 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，但在浏览器方面可能很重要)。

使用一种方法与另一种方法相比是否存在明显的性能问题，这可能会影响首选方法？

Answer 1

我们可以考虑有两种方法来做到这一点:

• 带有@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">

您可以像在字形示例中一样继续使用变体类。