Question de boucle sur Sass

Fermé
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 - 7 févr. 2021 à 20:09
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 - 7 févr. 2021 à 20:12
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 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
7 févr. 2021 à 20:12
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