css - 一行是SASS

Question

在 CSS 中我可以这样做:

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

但在 sass(不是 scss)中似乎同样会占用 6 行？是否可以为只有一个属性的规则做一个单行 is sass？

Answer 1

这绝不是为了帮助您将这段代码压缩到一行，而是要从不同的 Angular 来考虑它。

在 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; }