• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 10/9/20

Améliorez les mixins avec les fonctions Sass

Log in or subscribe for free to enjoy all this course has to offer!

Passons à la vitesse supérieure avec nos mixins grâce aux fonctions Sass

Utilisez la bonne fonction

Si vous regardez plus attentivement la maquette de la page de contact, vous verrez que la couleur de l’ombre du texte n’est pas du même vert menthe que  $colour-primary. Elle est même un peu plus foncée :

Image montrant que l'ombre de contactez-moi est un vert plus foncée que $colour-primary
L’ombre de contactez-moi est d'un vert plus foncé que $colour-primary

Cela signifie que le mixin heading-shadow doit utiliser une valeur de couleur plus foncée. OK, remontons donc en haut du document pour créer une nouvelle variable pour la coul… stooooooop. Il doit y avoir un moyen plus simple, non ? Au final, c’est presque la même couleur, juste un poil plus foncée.

Créer une toute nouvelle variable pour l’ombre voudrait dire qu’on aurait une couleur de plus à garder en tête. Et si $colour-primary était changée à l’avenir, il ne faudrait pas oublier de modifier la couleur de l’ombre en fonction. Bref, encore du travail supplémentaire et du code encombrant, aucun intérêt. On va trouver une autre solution. 💪

Rappelez-vous : mieux travailler, pas plus…

Il se trouve que Sass a une boîte à outils conséquente, pleine d’outils qui peuvent vous aider à faire ce genre de choses. Pas seulement une petite caisse à outils mais une grande, genre dernier cri, pleine de compartiments et de tiroirs avec tout ce qu’il faut dedans.🛠🔩⚙️⛏ Si vous y jetez un œil, vous découvrirez qu’il y a un tiroir entier d’outils uniquement dédiés aux couleurs ! 🎉

On appelle ces outils des fonctions. Les fonctions sont des bouts de code préfabriqués qui effectuent des tâches, comme par exemple prendre un argument, le modifier et renvoyer la nouvelle valeur sans que vous n’ayez à le faire vous-même. Sass a des fonctions pour désaturer, inverser et même foncer les couleurs (et bien d’autres encore, la liste est longue).

La fonction nommée judicieusement “darken” (assombrir, en anglais) prend deux arguments : une valeur de couleur, et une valeur qui indique à quel point vous voulez assombrir votre valeur. Pour assombrir $colour-primary pour notre ombre de texte, utilisez la fonction à l’endroit où vous auriez placé une valeur de couleur en temps normal :

@mixin heading-shadow($colour:$colour-primary, $size: $heading-shadow-size){
text-shadow: $size $size darken($colour, 10%);
}

Nous avons remplacé $colour dans les arguments de text-shadow par la fonction  darken()  et avons passé $colour en premier argument, et la proportion dans laquelle nous voulons la rendre plus foncée en deuxième argument : ici 10 %.

Quand vous regardez le CSS compilé, vous voyez que le mixin heading-shadow produit une ombre ayant la valeur hex  #11af82, soit une version 10 % plus foncée que $colour-primary (#15dea5) :

.form__heading {
text-shadow: 0.55rem 0.55rem #11af82;
}

Maintenant, plus besoin de vous souvenir de mettre à jour la couleur plus foncée pour le mixin heading-shadow. Dès que vous modifiez votre $colour-primary, votre mixin générera automatiquement l’ombre correspondante.

Plutôt stylé, non ?

Mais pourquoi seulement 10 % ? Et comment je sais qu’il faut une couleur 10 % plus foncée ? Qu’est-ce que ça signifie ? 😶

C’est précisément le sujet de notre prochain point !

Découvrez d’autres méthodes pour manipuler les couleurs

La valeur de $colour-primary est #15dea5, qui est l’équivalent de vert menthe en hexadécimal, mais qui peut aussi s’écrire (21,222,165)en RGB. Les valeurs hexadécimales (ou hex) sont en réalité composées de trois paires de valeurs qui se traduisent en canaux rouge, vert et bleu dans les couleurs RBG ; en d’autres termes, c’est juste une façon plus brève d’écrire les valeurs  rgb()

Image montrant une couleur exprimée de deux façon différentes
Des valeurs de couleurs exprimées de deux façons différentes 

Mais il existe un autre moyen d’exprimer les couleurs dans CSS et Sass :  hsl() , L’abréviation de hue, saturation et lightness (teinte, saturation et clarté). Alors que rgb()  se rapporte aux proportions de rouge, vert et bleu dans une couleur,  hsl()  mesure où se situe la couleur dans le nuancier et à quel point elle est vive et claire :

Image illustrant la mesure hsl
La mesure hsl 

$colour-primary a des valeurs de teinte, saturation et clarté de hsl(163, 83 %, 48 %), ce qui signifie que sa teinte se situe à 163° dans le spectre, que sa saturation est de 83 % et sa clarté de 48 %. Pour obtenir une couleur 10 % plus foncée, il faut diminuer la valeur de clarté de 10 %, ce qui donne une valeur de hsl(163, 83%, 38%).

Et c’est exactement ce que fait la fonction  darken()  en arrière-plan. Elle prend une couleur et, par le biais d’une magie obscure, la convertit en  hsl(). Ensuite, elle prend la quantité de changement demandé sur la clarté et fait le calcul. Enfin, elle prend la valeur   hsl()  obtenue et la retourne sous forme de valeur hex à compiler dans le document CSS.

Quand une fonction donne une valeur, par exemple une nouvelle couleur, on dit que la fonction retourne cette valeur. Nous verrons de plus près comment marchent les fonctions et le mot clé @return très rapidement ! 

Mais attends, c’est suuuper compliqué ! 🤯

Ici, je vous explique juste comment fonctionne la fonction darken et ce qu’elle fait exactement, afin que vous compreniez ce qui se passe quand vous l’utilisez, sans forcément voir toutes les étapes. Le but des fonctions est de vous faciliter la vie et d'écrire une codebase propre et flexible. Et ceci, en créant des valeurs de façon dynamique, ce qui vous permet de les inclure dans des modules qui sont réutilisables partout dans votre code.

Essayez par vous-même !

Apprenez à utiliser les fonctions avec un cas précis : en générant une couleur en fonction d’une autre.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Notre mixin heading-shadow crée désormais par elle-même des valeurs de couleurs plus foncées selon les paramètres que nous avons précisés, diminuant notre charge de travail... Mais que se passerait-il si on remplaçait $colour-primary par quelque chose de beaucoup plus foncé ? Dans ce cas, peut-être qu’on voudrait rendre la couleur de l’ombre plus claire, et pas plus foncée.

En résumé

  • Les fonctions sont des bouts de code réutilisables qui effectuent des tâches prédéfinies.

  • Sass fournit tout un tas de fonctions prêtes à l’emploi que vous pouvez utiliser pour manipuler des valeurs et rendre votre code mieux organisé et du coup plus facile à maintenir.

  • Les valeurs de couleurs peuvent être manipulées à travers les couleurs rouge, vert et bleu, mais aussi à travers les teintes, saturations et clartés.

Dans le chapitre suivant, nous vous apprendrons comment faire pour que votre mixin réagisse complètement différemment en fonction des situations.

Example of certificate of achievement
Example of certificate of achievement