Puis-je utiliser des variables pour les sélecteurs?

J’ai cette variable:

$gutter: 10; 

Je veux l’utiliser dans un sélecteur comme le SCSS:

 .grid+$gutter { background: red; } 

donc la sortie devient CSS:

 .grid10 { background: red; } 

Mais cela ne fonctionne pas. C’est possible?

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

Si utilisé dans une chaîne par exemple dans une URL:

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

De la référence Sass sur “Interpolation” :

Vous pouvez également utiliser des variables SassScript dans les sélecteurs et les noms de propriété à l’aide de la syntaxe d’interpolation # {}:

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

De plus, la directive @each n’est pas nécessaire pour effectuer un travail d’interpolation, et comme votre $gutter ne contient qu’une seule valeur, vous n’avez pas besoin d’une boucle.

Si vous aviez plusieurs valeurs pour créer des règles, vous pourriez alors utiliser une liste Sass et @each :

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

… pour générer la sortie suivante:

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

Voici quelques exemples supplémentaires. .

Voici la solution

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

s’il s’agissait d’un préfixe de fournisseur, dans mon cas, le mixin n’a pas été compilé. J’ai donc utilisé cet exemple

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