Simplifiez-vous le CSS avec Sass

Vous avez créé une mixin pour incorporer une bordure sur le titre du portfolio de Robbie. Sauf que, changement de programme, la couleur de l’ombre ne plaît plus du tout. On vous envoie un nouveau visuel :

Wow. Là c’est bien flashy niveau couleur !

Avant même de commencer à coder, posez-vous, et analysez… Si on procède étape par étape, on sait qu’il faut une nouvelle couleur pour cette ombre. Quelle serait la meilleure façon d’intégrer cette proposition en tenant compte de votre code actuel ?

$dark-purple: #1d0221;

$title-color: #a5b4fc;

@mixin title-shadow {

 text-shadow: .50rem .50rem $dark-purple;

}

Vous avez :

• deux variables $title-color  et $dark-purple  qui contiennent chacune une couleur ;

• une mixin title-shadow  qui contient une propriété CSS text-shadow ayant pour paramètre une couleur $dark-purple  .

Comment cette mixin est-elle utilisée ?

.intro__title {

  color: $title-color;

  @include title-shadow;

}

La mixin title-shadow  est incluse dans .intro__title  : elle sera donc appliquée aux éléments contenus dans .intro__title  . Ici, le titre.

Créer de nouvelles variables de couleur ? Vous savez faire. ✅

Créer une mixin qui prend en paramètre une couleur ? Vous savez faire. ✅

C’est parti ! OK, remontons donc en haut du document pour créer une nouvelle variable pour la coul... stooooooop. 🛑

Dans ce cas-ci, on parle bien d’une seule ombre. Mais imaginons que sur d’autres pages, vous ayez un autre titre, de la même couleur, seulement il vous faut une ombre, mais plus claire. Et puis un jour, une autre ombre mais plus foncée.

Créer une toute nouvelle variable pour chaque ombre, c’est aussi une nouvelle variable par couleur… Encore du travail supplémentaire et du code encombrant, aucun intérêt pour vous. Votre objectif, c’est de coder de manière plus lisible, sereine et organisée certes, mais surtout de gagner du temps.

On va trouver une autre solution. 💪

Découvrez la magie des fonctions

Il se trouve que Sass a une sacrée boîte à outils qui peut vous aider à faire ce genre de choses. Pas seulement une petite boîte à outils mais une grande, la totale ! 🛠

On appelle ces outils des fonctions.

En programmation, les fonctions sont omniprésentes, et je sais qu’elles peuvent faire peur. Soyez rassuré, nous n’allons pas entrer dans le détail et nous noyer dans une complexité de définitions. 😵‍💫 Bien au contraire !

Tout d’abord, qu’est-ce qu’une fonction ?

J’adore les métaphores et j’en ai une qui est parfaite !

Une fonction, c’est un peu comme la pâte à pancake ou à cookie que vous achetez déjà préparée. Elle a un nom : pancakes_facile .🥞 Si on lit la notice, pancakes_facile  a besoin d’ingrédients en plus, comme des œufs ou du lait (ou en informatique, des arguments). Vous y ajoutez des oeufs, du lait ou même du sirop d’érable directement dans la pâte (dans notre cas, nos couleurs !), un peu de beurre dans la poêle et hop des pancakes ! 🥞 Vous n’avez rien eu à faire. Mettez les pieds sous la table, cette fonction s’occupe de tout pour vous. Comme on dit dans le jargon : “ça fait le café !”.

Mais si vous aviez voulu ajouter des amandes, vous auriez pu, ou des pépites de chocolats ou je ne sais quoi (aucun jugement sur mes recettes s’il vous plaît !). Peu importe, la finalité c’est que vous ayez quand même des pancakes, puisque notre recette de pancakes_facile  vous permet de mettre les ingrédients que vous voulez dans vos pancakes, vous obtiendrez toujours une pâte à pancakes.

Il existe de nombreuses recettes préparées pour gâteaux, pour Sass c’est pareil. Sass a des fonctions pour désaturer, inverser et même assombrir les couleurs (et bien d’autres encore, la liste est longue…). Dans notre cas, nous voulons assombrir une couleur.

Comment faire ? Comment savoir quelle fonction utiliser ? Je regarde la documentation !

Voici ce qu’on peut lire :

D’après la documentation, on comprend que la fonction nommée “darken” (assombrir, en anglais) prend deux arguments :

1. Une valeur de couleur.

2. Une valeur $amount qui indique à quel point vous voulez assombrir votre couleur.

Vous vous souvenez des pancakes ? La métaphore fonctionne toujours ! Notre recette darken assombrit les couleurs. Pour pouvoir faire cette recette il nous faut 2 ingrédients : une valeur de couleur et une valeur d’assombrissement en pourcentage, comprise entre 0 % et 100 %. 

On va mettre 35 juste pour être sûrs de voir le résultat, et ajuster en fonction. C’est ce qui est beau avec le développement : on essaie, on voit et on essaie à nouveau !

Utilisez une fonction avec votre mixin

Vous avez la recette, les ingrédients, tout est mélangé. Il vous faut maintenant cuire les pancakes, dans notre cas : utiliser notre fonction.

Si on se réfère à notre code :

1. La valeur de couleur sera $title-color  : nous voulons que l’ombre de notre titre soit plus foncée que la couleur du titre.

2. La valeur $amount sera de 35 % pour commencer.

Pour utiliser darken  , vous allez utilisez la fonction à l’endroit où vous auriez placé une valeur de couleur en temps normal, ou la mettre au four : 😉

Dans notre cas, nous avions :

@mixin title-shadow {

 text-shadow: .50rem .50rem $dark-purple;

}

Nous allons remplacer $dark-purple  par la fonction darken. Nous voulons que notre ombre s’adapte à la couleur du titre, et donc $title-color  .

Notre fonction ressemble à ceci : darken($title-color,  35%)  .

Nous allons remplacer $dark-purple  par notre fonction :

@mixin title-shadow {

  text-shadow: .50rem .50rem darken($title-color,  35%);

}

Et voilà ! Nous avons :

1. Remplacé $darken-purple  par la fonction  darken  .

2. Passé $title-color  en premier argument.

3. Passé le pourcentage à appliquer pour assombrir notre couleur $title-color  en deuxième argument : ici 35 %.

Quand vous regardez le CSS compilé, vous voyez que la mixin title-shadow  a une ombre ayant la valeur hex #082ee7, soit une version 35 % plus foncée que $title-color  (#a5b4fc).

Vous venez de faire des pancakes... euh... d’utiliser une fonction ! J’espère que cette introduction aux fonctions étape par étape vous aidera à les aborder sereinement dans votre carrière en développement. N’oubliez pas les pancakes ! 🥞🇨🇦

À vous de jouer !

Vous avez vu comment utiliser la fonction  darken  , je vous invite à essayer d’utiliser une autre fonction dans ce CodePen : la fonction mix  .

Comparez avec la correction dans ce CodePen.

En résumé

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

• Une fonction doit être appelée pour pouvoir être utilisée.

• 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. 

• Pour comprendre comment utiliser une fonction, lisez sa documentation, elle regorge d’explications.

Sass regorge de fonctionnalités plus puissantes les unes que les autres, et notamment en ce qui concerne le responsive. Abordez le responsive avec Sass dans le prochain chapitre.