Fonctions de couleur Sass

Sass 函数Fonctions Sass

Les fonctions de couleur Sass peuvent être divisées en trois parties : réglages de couleur, récupération de couleur et opérations sur les couleurs.

Le tableau ci-dessous répertorie les fonctions de couleur de Sass :

Réglages de couleur Sass

Fonction Description & exemples
rgb(red, green, blue) Créez une couleur Rouge-Vert-Bleu (RGB). R signifie « rouge », G signifie « vert » et B signifie « bleu ».

Exemple :
rgb(0, 0, 255);
rgba(red, green, blue, alpha) Créez une couleur à partir des valeurs rouge, vert, bleu et alpha.

Exemple :
rgba(0, 0, 255, 0.3);
hsl(teinte, saturation, luminosité) Créez une couleur à partir des valeurs de teinte, saturation et luminosité.

Exemple :
hsl(120, 100%, 50%); // vert
hsl(120, 100%, 75%); // vert clair
hsl(120, 100%, 25%); // vert foncé
hsl(120, 60%, 70%); // vert doux
hsla(teinte, saturation, luminosité, alpha) Créez une couleur à partir des valeurs de teinte, saturation, luminosité et alpha.

Exemple :
hsl(120, 100%, 50%, 0.3); // vert avec transparence
hsl(120, 100%, 75%, 0.3); // vert clair avec transparence
grayscale(color) Transforme une couleur en gris, équivalent à desaturate( color,100%).

Exemple :
grayscale(#7FBFFF);
Résultat : #c6c6c6
complement(color) Retourne une couleur complémentaire, équivalent à adjust-hue($color,180deg).

Exemple :
complement(#7FBFFF);
Résultat : #ff7faa
invert(color, weight) Retourne une couleur inversée, avec les valeurs rouge, vert et bleu inversées, et la valeur alpha inchangée.

Exemple :
invert(white);
Résultat : black

Récupération des couleurs Sass

Fonction Description & exemples
red(color) Obtenez la valeur rouge (0-255) d'une couleur.

Exemple :
red(#7FBFFF);
Résultat : 127
red(red);
Résultat : 255
green(color) Obtenez la valeur verte (0-255) d'une couleur.

Exemple :
green(#7FBFFF);
Résultat : 255
green(blue);
Résultat : 0
blue(color) Obtenir la valeur de bleu (0-255) d'une couleur.

Exemple :
blue(#7FBFFF);
Résultat : 212
blue(blue);
Résultat : 255
hue(color) Renvoie l'angle de teinte d'une couleur dans l'espace colorimétrique HSL (0deg - 255deg).

Exemple :
hue(#7FBFFF);
Résultat : 160deg
saturation(color) Obtenir la valeur de saturation (0% - 100%) d'une couleur.

Exemple :
saturation(#7FBFFF);
Résultat : 100%
lightness(color) Obtenir la valeur de luminosité (0% - 100%) d'une couleur.

Exemple :
lightness(#7FBFFF);
Résultat : 74.9%
alpha(color) Renvoie le canal alpha de color sous la forme d'un nombre entre 0 et 1.

Exemple :
alpha(#7FBFFF);
Résultat : 1
opacity(color) Obtenir la valeur alpha (transparence) (0-1) d'une couleur.

Exemple :
opacity(rgba(127, 191, 255, 0.5);
Résultat : 0.5

Opérations sur les couleurs Sass

Fonction Description & exemples
mix(color1, color2, weight) Mélangez deux couleurs ensemble.weightLe paramètre weight doit être compris entre 0% et 100%. La valeur par défaut de weight est 50%, ce qui signifie que la nouvelle couleur prend 50% de color1 et 50% de color2. Si weight est 25%, cela signifie que la nouvelle couleur est composée de 25% de color1 et 75% de color2.
adjust-hue(color, degrees) Créez une nouvelle couleur en modifiant la valeur de teinte d'une couleur (-360deg - 360deg).

Exemple :
adjust-hue(#7FBFFF, 80deg);
Résultat : #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) Cette fonction peut ajuster une ou plusieurs valeurs d'attribut d'une couleur donnée, y compris les différents paramètres de valeur de couleur des couleurs RGB et HSL, ainsi que la valeur du canal alpha. Ces ajustements dépendent des paramètres nommés transmis, qui sont ajoutés ou soustraits aux valeurs de couleur correspondantes de la couleur donnée.

Exemple :
adjust-color(#7FBFFF, blue: 25);
Résultat :
change-color(color, red, green, blue, hue, saturation, lightness, alpha) Semblable à adjust-color ci-dessus, sauf que les paramètres passés à cette fonction remplacent directement les valeurs d'origine sans aucune opération arithmétique.

Exemple :
change-color(#7FBFFF, red: 255);
Résultat : #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) Une autre fonction pratique de réglage des couleurs. adjust-color ajoute ou soustrait simplement les arguments passés aux paramètres de valeur propres à la couleur, ce qui peut parfois entraîner un dépassement des valeurs accumulées ; bien sûr, la fonction maintient le résultat dans les seuils valides. La fonction scale-color évite cette situation, permettant aux paramètres d'être ajustés efficacement dans les seuils sans se soucier d'un dépassement.

Par exemple, la valeur de luminosité d'une couleur est comprise entre 0% et 100%. Si scale-color($color, $lightness: 40%) est exécuté, cela signifie que la luminosité de la couleur augmentera de (100 - valeur d'origine) × 40%.

Un autre exemple : exécuter scale-color($color, $lightness: -40%) signifie que la luminosité de la couleur diminuera de (valeur d'origine - 0) × 40%.

Toutes les valeurs de paramètres doivent être comprises entre 0% et 100%, et les paramètres RGB et HSL ne peuvent pas entrer en conflit.

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha) Créez une couleur à partir des valeurs rouge, vert, bleu et alpha.

Exemple :
rgba(#7FBFFF, 30%);
Résultat : rgba(127, 191, 255, 0.3)
lighten(color, amount) Créez une nouvelle couleur en augmentant la valeur de luminosité (0% - 100%) d'une couleur pour l'éclaircir.
darken(color, amount) Créez une nouvelle couleur en diminuant la valeur de luminosité (0% - 100%) d'une couleur pour l'assombrir.
saturate(color, amount) Augmentez la saturation d'une couleur donnée. Équivalent à adjust-color( color, saturation: amount)
desaturate(color, amount) Diminuez la saturation d'une couleur pour produire une nouvelle valeur de couleur. Là encore, la plage de valeurs de saturation est 0% ~ 100%. Équivalent à adjust-color(color, saturation: -amount)
opacify(color, amount) Diminuez la transparence d'une couleur, avec des valeurs entre 0-1. Équivalent à adjust-color(color, alpha: amount)
fade-in(color, amount) Diminuez la transparence d'une couleur, avec des valeurs entre 0-1. Équivalent à adjust-color(color, alpha: amount)
transparentize(color, amount) Augmenter la transparence d'une couleur, avec des valeurs comprises entre 0 et 1. Équivalent à adjust-color(color, alpha: -amount)
fade-out(color, amount) Augmenter la transparence d'une couleur, avec des valeurs comprises entre 0 et 1. Équivalent à adjust-color(color, alpha: -amount)

Sass 函数Fonctions Sass

Autres extensions