web-dev-qa-db-fra.com

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

J'ai cette variable:

$Gutter: 10;

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

.grid+$Gutter {
    background: red;
}

donc la sortie devient CSS:

.grid10 {
    background: red;
}

Mais ça ne marche pas. C'est possible?

cssvariablessasscss-selectors
61
Johansrk
$Gutter: 10;

.grid#{$Gutter} {
    background: red;
}

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

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

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 que l'interpolation fonctionne, et comme votre $Gutter ne contient qu'une seule valeur, aucune boucle n'est nécessaire.

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

$grid: 10, 40, 120, 240;

@each $i in $grid {
  .g#{$i}{
    width: #{$i}px;
  }
}

... pour générer le résultat suivant:

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

Voici quelques exemples supplémentaires. .

38
fk_

Voici la solution

$Gutter: 10;

@each $i in $Gutter {
  .g#{$i}{
     background: red;
  }
}
2
Johansrk

s'il s'agit d'un préfixe de vendeur, 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()
0
Artemee Senin