SASS：生成的 CSS 不是最佳的

我正在努力学习SASS。我让这个代码片段工作了，但在我看来生成的 css 很糟糕。我希望所有这些 css 都放在同一个 .container{ } 中。没有三个不同，如下所示。

SASS:

   .container{
         @extend %clearfix;
         @extend %text-truncate;
         @include border-radius(10px);
     }

生成的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。

也可以看看：https://codereview.stackexchange.com/a/27910/26722 https://codereview.stackexchange.com/a/27910/26722