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 control directives: @if, @for, @each and @while"的The Sass Way上的帖子中，我介绍了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; }

Answer 2

Sass语法主要基于缩进和换行符，所以在Sass中确实是六行（每条规则两行，不包括空行）：

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

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

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

据我所知，你不能把它们浓缩成Sass中的单行。

单线是SASS

2 个答案: