SASS：生成的CSS不是最优的

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

使用一个仅延伸类简单地抑制从输出的名称。如果您的扩展类不打算重用，那么它们更适合作为混合使用。

另见：https://codereview.stackexchange.com/a/27910/26722