为什么要在 SCSS 中使用 @extend？

Question

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

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

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

Answer 1

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

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

IE -

.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;
}