一衬垫是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; }