为什么人们在 SCSS 中使用“@extend”？

Question

在 Sass 中，我发现我可以将“@extend”与“@mixin”一起使用。但是从代码中，我很好奇使用扩展的优势是什么。
如果我们知道我们必须使用哪个 'classes'，我们可以只使用两个 class，而不是扩展和制作另一个 class.

在我看来，如果我们只使用两个 classes，而不进行多次扩展，代码会更短并且我们可以节省内存。我能想到的优点是在 'CSS output' 上更容易看到，但通常人们只检查 SCSS 文件，而不是 CSS 代码输出。

使用两个单独的 classes 而不是使用多个扩展不是更好吗？使用“@mixin”的主要优势是什么？

Answer 1

它可以帮助您快速编写 DRY 代码。如果使用得当，@extend 会非常有用。

它允许一个选择器扩展另一个选择器的样式，实质上提供了一种子类化形式。 @extend 通过将选择器组合成一个逗号分隔的选择器来工作。

即-

.A {
    font-size: 1rem;
    color:red;
}

.a{
    @extend .A;
    line-height: normal;
   }


Which outputs:

.A,.a {
   font-size: 1rem;
    color:red;
}

.a{
   line-height: normal;
}

Answer 2

有几个关于扩展的重要问题需要牢记：

他们更改您的 CSS 规则的顺序并经常笨拙地重新组合它们，这可能会在以后出现意外问题
当你的 Sass 被缩小和 gzip 时，它们的性能不如 Mixins。

Harry Roberts 详细介绍这些问题的精彩文章："Mixins for Better Performance"

为什么人们在 SCSS 中使用“@extend”？

Why people use '@extend' in SCSS?

sass

scss-mixins