单线是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

这绝不是为了帮助您将此代码压缩到一行,而是从不同的角度来考虑它.

在Sass Way上的一篇名为"Sass控制指令:@ if,@ for,@ each和@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; }