web-dev-qa-db-fra.com

Pour boucle dans SCSS avec une combinaison de variables

J'ai un tas d'éléments: (# cp1, # cp2, # cp3, # cp4)

que je veux ajouter une couleur d'arrière-plan à l'aide de SCSS.

Mon code est:

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@for $i from 1 through 4 {
    #cp#{i} {
        background-color: rgba($(colour#{i}), 0.6);

        &:hover {
            background-color: rgba($(colour#{i}), 1);
            cursor: pointer;
        }
    }
}
htmlcsssass
30
tobyn

Au lieu de générer les noms de variables par interpolation, vous pouvez créer une liste et utiliser la méthode nth pour obtenir les valeurs. Pour que l'interpolation fonctionne, la syntaxe doit être #{$i}, comme mentionné par trémie.

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

$colors: $colour1, $colour2, $colour3, $colour4;

@for $i from 1 through length($colors) {
    #cp#{$i} {
        background-color: rgba(nth($colors, $i), 0.6);

        &:hover {
            background-color: rgba(nth($colors, $i), 1);
            cursor: pointer;
        }
    }
}
56
Xabriel

Comme @hopper l'a dit, le principal problème est que vous n'avez pas préfixé les variables interpolées avec un signe dollar, donc sa réponse doit être marquée comme correcte, mais je veux ajouter un conseil.

Utilisez la règle @each Au lieu de la boucle @for Pour ce cas spécifique . Les raisons:

  • Vous n'avez pas besoin de connaître la longueur de la liste
  • Vous n'avez pas besoin d'utiliser la fonction length() pour calculer la longueur de la liste
  • Vous n'avez pas besoin d'utiliser la fonction nth ()
  • La règle @each Est plus sémantique que la directive @for

Le code:

$colours: rgb(255,255,255), // white
          rgb(255,0,0),     // red
          rgb(135,206,250), // sky blue
          rgb(255,255,0);   // yellow

@each $colour in $colours {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

Ou si vous préférez, vous pouvez inclure chaque couleur $ dans la directive @each au lieu de déclarer la variable $ colors:

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0);     // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@each $colour in $colour1, $colour2, $colour3, $colour4 {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

Référence Sass pour la directive @each

36
Alex Guerrero

Les variables SASS doivent toujours être préfixées d'un signe dollar à l'intérieur des interpolations, donc chaque endroit que vous avez #{i}, ça devrait vraiment être #{$i}. Vous pouvez voir d'autres exemples dans la référence SASS sur interpolations .

18
hopper