Module de couleurs
Sass offre différents modules maison (built-in) permettant de simplifier l'écriture de code CSS. Parmi ceux-ci, le plus populaire est le module de couleurs que nous examinerons aujourd'hui.
Importation
Afin d'éviter d'affecter négativement la performance du code CSS, les modules ne sont pas importés par défaut. Il faut donc penser à les importer si l'on souhaite les utiliser.
Par exemple, afin d'importer le module de couleurs, il faut écrire:
@use "sass:color";Suite à cet import, plusieurs fonctionnalités de traitement de couleurs s'ajouteront à Sass.
Whiteness & Blackness
Les fonctionnalités whiteness et blackness permettent d'altérer une couleur en lui ajoutant du blanc ⚪️ ou du noir ⚫️. Le résultat correspond au résultat obtenu si un galon de peinture verte était mélangé à moitié (50%) avec un galon de peinture blanche ou à moitié (50%) avec un galon de peinture noire.
Les unités doivent être exprimées en pourcentage (%) pouvant-être positif ou négatif.
Hue
La fonctionnalité hue permet de changer la teinte d'une couleur toute en gardant exactement la même saturation et la même luminosité.
Les unités données doivent-être des nombres positifs ou négatifs déplaçant la position de la teinte actuelle sur l'échelle de teintes.
La teinte actuelle à une valeur de 155.
En haut ⬆️, elle est incrémentée de 100, donc atteint à 255.
En bas ⬇️, elle est diminuée de 100, donc atteint 55.
Saturation & Grayscale
La fonctionnalité saturation permet d'altérer l'intensité d'une couleur. Par exemple, en donnant une saturation de -50%, une couleur devient automatiquement 50% moins vibrante. La fonctionnalité color.grayscale quant à elle est l'équivalent d'une couleur ayant perdu toute son intensité, pour ainsi dire l'équivalent de lorsque cette couleur est imprimée en noir et blanc 🖨.
Les unités doivent être exprimées en pourcentage (%) pouvant-être positif ou négatif.
color.adjust($color, $saturation: -100%) = color.grayscale($color),
soit une couleur complètement désaturée.
Lightness
La fonctionnalité lightness permet d'altérer la luminosité d'une couleur. Il est donc possible de la rendre plus lumineuse ou plus sombre via celle-ci.
Les unités doivent être exprimées en pourcentage (%) pouvant-être positif ou négatif.
Complement & Invert
La fonctionnalité color.complement permet d'obtenir la couleur complémentaire sur le cercle chromatique à la couleur passée en argument. Tandis que la fonctionnalité color.invert soustrait les valeurs de rouge, vert et bleu à 255 afin d'obtenir la couleur opposée exacte.
Certes, ces deux fonctionnalités se ressemblent beaucoup, mais il est parfois pratique d'avoir la flexibilité de choisir entre les deux.
Red, Green & Blue
Les fonctionnalités red, green et blue permettent d'augmenter ou de réduire le taux de rouge 🔴, vert 🟢 ou bleu 🔵 dans une couleur donnée.
Les unités données doivent-être des nombres positifs ou négatifs faisant varier le taux de rouge, vert ou bleu. Ces taux ont un minimum de 0 et un maximum de 255 qu'ils ne peuvent jamais dépasser.
Alpha
La fonctionnalité alpha permet de faire fluctuer le taux de transparence d'une couleur. Pour ce faire, il faut passer un nombre entre -1 et 1 s'ajoutant à la valeur courante d'alpha.
Par exemple, si une couleur est actuellement opaque (alpha de 1), il faudra lui donner la valeur -0.5 pour diminuer son opacité de 50%.
Cheatsheet
Voici coup sur coup la même couleur verte 🟢 ($color: #00c774;) altérée via des fonctionnalités du module de couleurs Sass: