¿Puedo usar variables para selectores?

Tengo esta variable:

$gutter: 10; 

Quiero usarlo en un selector como SCSS:

 .grid+$gutter { background: red; } 

entonces el resultado se convierte en CSS:

 .grid10 { background: red; } 

Pero esto no funciona. ¿Es posible?

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

Si se usa en una cadena, por ejemplo, en una url:

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

De la referencia de Sass en “Interpolación” :

También puede usar variables SassScript en selectores y nombres de propiedad usando # {} syntax de interpolación:

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

Además, la directiva @each no es necesaria para que funcione la interpolación, y como $gutter solo contiene un valor, no hay necesidad de un bucle.

Si tenía varios valores para crear reglas, podría usar una lista Sass y @each :

 $grid: 10, 40, 120, 240; @each $i in $grid { .g#{$i}{ width: #{$i}px; } } 

… para generar el siguiente resultado:

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

Aquí hay algunos ejemplos más. .

Aquí está la solución

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

si fuera un prefijo de proveedor, en mi caso el mixin no comstackba. Entonces usé este ejemplo

 @mixin range-thumb() -webkit-appearance: none; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; margin-top: -14px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; input[type=range] &::-webkit-slider-thumb @include range-thumb() &::-moz-range-thumb @include range-thumb() &::-ms-thumb @include range-thumb()