Question

我正在努力学习SASS。我得到了这个代码片段，但在我看来生成的CSS很糟糕。我希望所有这些css都能用同一个.container {}。不是三种不同，如下所示。

SASS：

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

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

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

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

SASS：生成的CSS不是最优的

1 个答案: