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 cela ne fonctionne pas. Est-il possible?

InformationsquelleAutor Johansrk | 2012-10-05
  1. 99
    $gutter: 10;

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

    Si utilisé dans une chaîne de caractères par exemple dans une url:

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

    De la Sass de Référence sur "Interpolation":

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

    $gutter: 10;

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

    En outre, la @chaque la directive n'est pas nécessaire de faire de l'interpolation de travail, et que votre $gutter ne contient qu'une seule valeur, il n'y a pas besoin d'une boucle.

    Si vous aviez plusieurs valeurs afin de créer des règles, que vous pouvez ensuite utiliser un Sass liste et @chaque:

    $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 de plus..

    InformationsquelleAutor fk_
  3. 2

    Voici la solution

    $gutter: 10;

@each $i in $gutter {
  .g#{$i}{
     background: red;
  }
}
    • Ce sorties seulement .g10
    InformationsquelleAutor Johansrk
  4. 0

    si il serait un vendeur préfixe, dans mon cas, le mixin ne compile pas. 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()
    InformationsquelleAutor Artemee Senin