Nommer les variables de couleur en sass

Dans mon expérience personnelle Le moyen le plus utile de nommer les couleurs est de le faire en ce qui concerne la fonction de la couleur, telle que

• $ fond
• $ contraste
• $ texte
• $ de côté
• $ link

  et ainsi de suite. Bien sûr, quelles couleurs et noms peuvent dépendre de la conception.

  Ensuite, vous pouvez avoir des schémas de couleurs différents et échangeables définis sur différents styles, tels que:

  • _dark_scheme.Scss
  • _light_scheme.scss
  • _Pastels.scss

    L'idée ici, c'est que vous pouvez utiliser les mêmes variables de couleur dans vos feuilles de style principal et ne dépendez pas de couleurs spécifiques.

J'ai trouvé une autre idée dans Article «Variables de couleur». La solution suggérée par Sacha Greif forte> consiste à utiliser certaines variables pour stocker des noms de couleur descriptifs et d'autres pour attribuer ces couleurs à leurs fonctions:

 // first we set descriptive variables:
 $darkgrey: #333333;
 $blue: #001eff;

 // then we set functional variables:
 $text_color: $darkgrey;
 $link_color: $lightblue;
 $border_color: $lightblue;

 .myClass {
   color: $text_color;
   border-color: $border_color;
 }

 a {
   color: $link_color;
 }

J'aime l'idée de combiner générique à une nommée spécifique (bon pour la fin du code) et Description / Nommage fonctionnel . Donc, vous avez quelque chose comme ceci:

 // Descriptive naming
 $color-gray-light: #f3f3f3;
 $color-gray-dark: #999999;
 $color-red: red;

 // Functional naming
 $link-color: $color-red;
 $link-border-color: $color-gray-light;

Vous pouvez même créer un mixin pour gris (dans l'exemple RGBA est utilisé pour la transparence, par exemple le noir sur un fond rouge serait plus visible s'il s'agit de 80% de noir transparent plutôt que gris foncé). xxx

donne le résultat xxx