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