Posso usare le variabili per i selettori?

Ho questa variabile:

$gutter: 10; 

Voglio usarlo in un selettore come questo SCSS:

 .grid+$gutter { background: red; } 

quindi l’output diventa CSS:

 .grid10 { background: red; } 

Ma questo non funziona. È ansible?

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

Se utilizzato in una stringa, ad esempio in un URL:

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

Dal riferimento Sass su “Interpolazione” :

È inoltre ansible utilizzare le variabili SassScript nei selettori e nei nomi di proprietà utilizzando la syntax di interpolazione # {}:

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

Inoltre, la direttiva @each non è necessaria per far funzionare l’interpolazione e, poiché $gutter contiene solo un valore, non è necessario un ciclo.

Se avessi più valori per creare regole, potresti usare un elenco Sass e @each :

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

… per generare il seguente risultato:

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

Ecco alcuni altri esempi. .

Ecco la soluzione

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

se fosse un prefisso del venditore, nel mio caso il mixin non è stato compilato. Quindi ho usato questo esempio

 @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()