Однострочник 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; }

Answer 2

Синтаксис Sass в основном основан на отступах и переносах строк, поэтому в Sass это действительно будет шесть строк (по две на правило, исключая пустые строки):

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

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

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

Насколько я видел васне может сжать их до однострочников в Sass.