Могу ли я использовать переменные для селекторов?

У меня есть эта переменная:

$gutter: 10;

Я хочу использовать его в селекторе вроде SCSS:

.grid+$gutter {
    background: red;
}

поэтому вывод будет CSS:

.grid10 {
    background: red;
}

Но это не работает. Возможно ли это?

Ответы

Ответ 1

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

Если используется в строке, например, в URL-адресе:

background: url('/ui/all/fonts/#{$filename}.woff')

Ответ 2

Из Ссылка Sass на "Интерполяция" :

Вы также можете использовать переменные SassScript в селекторах и именах свойств, используя синтаксиС# {} интерполяции:

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

Кроме того, для выполнения интерполяции не требуется директива @each, и поскольку ваш $gutter содержит только одно значение, нет необходимо для цикла.

Если у вас было несколько значений для создания правил, вы могли бы использовать список Sass и @each:

$grid: 10, 40, 120, 240;

@each $i in $grid {
  .g#{$i}{
    width: #{$i}px;
  }
}

... для генерации следующего вывода:

.g10  { width: 10px; }
.g40  { width: 40px; }
.g120 { width: 120px; }
.g240 { width: 240px; }

Вот еще несколько примеров..

Ответ 3

Вот решение

$gutter: 10;

@each $i in $gutter {
  .g#{$i}{
     background: red;
  }
}