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

【问题标题】：Why people use '@extend' in SCSS?为什么人们在 SCSS 中使用“@extend”？
【发布时间】：2021-05-13 05:14:09
【问题描述】：

在 Sass 中，我发现我可以将 '@extend' 与 '@mixin' 一起使用。但是从代码中，我很好奇使用扩展的好处是什么。
如果我们确切知道必须使用哪些“类”，我们可以只使用两个类，而不是扩展并创建另一个类。

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

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

【问题讨论】：

vanseodesign.com/css/sass-mixin-or-extend
@extend 允许您对共享相同样式的选择器进行分组。 @mixin 将复制样式。
@Arkellys 感谢您的回答，但我知道它是如何工作的。最终，使用两个类并使用“扩展”制作一个替代类的效果相同。只是好奇使用它有什么好处？我以为一定有什么原因，但找不到。
优点是你不必重复你的样式和/或你的选择器就是这样。当您有多个共享相同样式的元素时，您可以创建一个将应用于所有这些元素的帮助程序类，或者您可以使用@extend 这样您的选择器将被分组，您不必重复它们你的代码。 Sass docs 还提供了@extend 有用用法的其他示例。最后，它只会让您的生活更轻松。
@extend 的优点是，假设有一个场景，您创建了一些通用类，并且在某个地方您只需要具有类似的样式并对其进行一些修改。此时你不会使用@mixin，因为你需要继承属性并向其中添加额外的更改而不干扰父类

标签： sass scss-mixins

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

它可以帮助您快速编写 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;
}

【讨论】：

@extend 的一个缺点是，如果您有一些类层次结构并使用关系选择器，则必须扩展每个关系。例如，当您扩展 3rd 方库时，这非常不舒服
同意！