SASS:生成的 CSS 不是最优的

Question

我正在尝试学习 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
}

Answer 1

这是@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;
}

使用仅扩展 类只是抑制输出中的名称。如果您的扩展类不打算重用，那么它们更适合作为混入。

另请参阅:https://codereview.stackexchange.com/a/27910/26722