Question de boucle sur Sass

ephelya Messages postés 282 Date d'inscription   Statut Membre Dernière intervention   -  
ephelya Messages postés 282 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour tout le monde,
Je voudrais faire générer dynamiquement la liste des classes correspondant aux couleurs que j'utilise souvent.
J'ai créé toute une série de variables pour pouvoir les reconnaître facilement mais je n'arrive pas à faire la boucle pour créer les classes correspondantes.
Je débute avec Sass onc je ne sais même pas si ce que je veux faire est possible ou non, je ne trouve la réponse nulle part...
Voilà ce que j'ai

$colors: light_rose, vdark_rose, dark_rose, vvdark_rose;

Je voudrais avoir des classes sous ce fomat :

.light_rose {
background-color: $light_rose;
}


Mais je ne trouve pas la bonne syntaxe pour faire ça.
J'ai testé tout ça mais rien ne fonctionne :

@each $color in $colors {
.#{$color} {
color: $'#{$color}';
}
}

.#{$color} {
color: $+'#{$color}';
}


Question subsidiaire, je voudrais aussi faire une boucle sur le nom de mes pages pour importer les fichiers scss correspondants mais ça ne veut pas non plus.

$pages: accueil, contact, profil;
@each $page in $pages {
@import "libs/pages/#{$page}.scss";
}

Error: This at-rule is not allowed here


Il y a une méthode pour ça ?

Merci d'avance pour votre aide ! :-)


Configuration: Macintosh / Firefox 85.0

1 réponse

ephelya Messages postés 282 Date d'inscription   Statut Membre Dernière intervention   2
 
Je précise que là j'ai mis un exemple de base, mais l'objectif est de pouvoir décliner d'autres classes à partir de la couleur choisie, dans le genre

.dark_rose {
color: $dark_rose;
& h1 {
background-color: darken($dark_rose, 60);
}
}
0