gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:17:59 26 4
gpt4 key购买 nike

在 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com