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