Могу ли я использовать переменные для селекторов? У меня есть эта переменная: $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; } }
Ответ 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; } Вот еще несколько примеров..