SASS：生成的CSS不是最优的

我正在努力学习SASS。我得到了这个片段的工作，但生成的css在我看来是可怕的。我希望所有这些css都放在相同的.container{}中。如下图所示，没有三种不同

SASS：

通用css：

.container{
...clear fix
}
.container{
...text-truncate
}
.container{
...clear border-radius
}

我想要的是：

.container{
...clear fix
...text-truncat
...clear border-radius
}

---

这就是

@extend

的本质。如果将扩展类更改为普通类，则会显示它的工作方式

@mixin my-mixin() {
    padding: 1em;
}

.a {
    color: red;
}

.b {
    border: 1px solid;
}

.foo {
    @extend .a;
    @extend .b;
    @include my-mixin();
}

汇编至：

.a, .foo {
  color: red;
}

.b, .foo {
  border: 1px solid;
}

.foo {
  padding: 1em;
}

使用仅扩展类只会从输出中取消名称。如果扩展类不打算重用，那么它们更适合作为mixin

---

另请参见：

谢谢您的回答。我从mixin开始，但读到不接受任何参数的mixin是错误的。

.a, .foo {
  color: red;
}

.b, .foo {
  border: 1px solid;
}

.foo {
  padding: 1em;
}