一襯墊是SASS

Question

在CSS我可以做這樣的事情：

.apple { background-image: url('apple.png'); } 
.orange { background-image: url('orange.png'); } 
.pear { background-image: url('pear.png'); } 

，但它似乎在SASS（未SCSS）同樣會佔用6號線？對於只有一個屬性的規則，是否有可能做一個單線程？

Answer 1

薩斯語法主要基於縮進和換行，所以在薩斯這確實是六行（每兩個規則，不包括空行）：

.apple 
    background-image: url('apple.png') 

.orange 
    background-image: url('orange.png') 

.pear 
    background-image: url('pear.png') 

至於我見過你不會把這些人凝聚到薩斯的單線隊員身上。

Answer 2

這不是爲了幫助您將此代碼壓縮到一行，而是從不同的角度思考它。

在The Sass Way標題爲"Sass control directives: @if, @for, @each and @while"的這篇文章中，我介紹了Sass中的控制指令。這是一種使用@each指令編寫代碼的方法。

$fruit-list: apple orange pear 

=fruit 
    @each $fruit in $fruit-list 
    &.#{$fruit} 
     background-image: url(#{$fruit}.png) 

.fruit 
    +fruit 

，輸出：

.fruit.apple { 
    background-image: url(apple.png); 
} 
.fruit.orange { 
    background-image: url(orange.png); 
} 
.fruit.pear { 
    background-image: url(pear.png); 
} 

使用.scss我們可以做這樣的一個襯墊，但在代碼的可讀性成本：

$fruit-list: apple orange pear; 

@mixin fruit { @each $fruit in $fruit-list { &.#{$fruit} { background-image: url(#{$fruit}.png); } } } 

.fruit { @include fruit; }