SCSS結構與多個CSS類

Question

我剛開始第一次使用SCSS。我注意到，由此產生的CSS比我手寫的CSS要少一些。例如，我使用的混入樣式重複，像這樣：

@mixin button { 
    border-radius: 4px 20px 20px 4px; 
    -moz-border-radius: 4px 20px 20px 4px; 
} 
.enquire { 
    .live-chat { 
     @include button; 
     background: #21a649; 
    } 
    .enquire-now { 
     @include button; 
     background: #33b1ff; 
    } 
} 

然後，所有我需要的按鈕是單級，「查詢 - 現在」，所有的風格都包括在一個類CSS。

如果我手寫這一點，但是，我會用2類，像這樣：

.button { 
    border-radius: 4px 20px 20px 4px; 
    -moz-border-radius: 4px 20px 20px 4px; 
} 
.enquire .live-chat { 
    background: #21a649; 
} 
.enquire .enquire-now { 
    background: #33b1ff; 
} 

然後在元素上，使用「按鈕查詢，現在」

因此，通過使用mixin，我將HTML中使用的類最小化，並使其編寫愉快，但是使我的實際CSS文件更長！這似乎有些反作用......我錯過了什麼？

mixins有什麼意義，如果採用舊式的方式，實際上會生成一個較小的CSS文件？

Answer 1

使用@extend指令有更易於維護的代碼，並防止款式重複：

%button { 
    border-radius: 4px 20px 20px 4px; 
    -moz-border-radius: 4px 20px 20px 4px; 
} 
.enquire { 
    .live-chat { 
     @extend %button; 
     background: #21a649; 
    } 
    .enquire-now { 
     @extend %button; 
     background: #33b1ff; 
    } 
} 

哪個編譯成這樣：

.enquire .live-chat, .enquire .enquire-now { 
border-radius: 4px 20px 20px 4px; 
-moz-border-radius: 4px 20px 20px 4px; 
} 
.enquire .live-chat { 
background: #21a649; 
} 
.enquire .enquire-now { 
background: #33b1ff; 
} 

Answer 2

它是一個權衡。你可以用eaiser編寫更易維護的CSS，因爲它更冗長。而且正如我最近發現的那樣，在IE中有這樣一件令人討厭的事情，那就是你不能在一個CSS文件中包含多於一定數量的選擇器，然後它對CSS文件的數量也有限制。因此，對於大型網站來說，我們的選擇器計數可能會比文件的大小更重要。特別是因爲您可以通過縮小並然後提供壓縮（gzipped）版本來緩解文件大小問題。

Answer 3

確實使用@extend代替：Sass Extend Reference