Simplifiez-vous le CSS avec Sass

Quand j’étais ado, j’étais obsédée par le surf.  Je passais mes étés au bord de l’océan à regarder les surfeurs. J’ai voulu faire comme eux ; alors après un cours je prends une planche grande et assez large pour que ce soit plus facile et je pars à l’eau. Impossible de me lever, pourtant j’observe les surfers et j’essaie j’essaie, je lance mes jambes sur le côté, j’essaie de sauter sur la planche, je me dis que j’ai une planche stable et que je devrais réussir, et pourtant rien ne fonctionne.

Au bout d’un moment, une surfeuse passe près de moi et je lui demande conseil en lui expliquant que je n’arrive pas à poser mes pieds sur la planche assez rapidement et à rester debout. Elle me regarde faire, s’approche, me montre comment positionner mes pieds et m’explique pendant un moment. Puis elle me dit de m’élancer sur la planche, sans réfléchir, de pousser sur mes bras et de ramener mes jambes au-dessous de mes hanches. Et là, je me suis levée ! Bon, et je suis tombée juste après, certes.

La morale de cette histoire est que la question n’est pas de choisir la bonne planche, c’est aussi de savoir l’utiliser. Et c’est pareil avec Sass.

Travailler mieux, pas plus dur.

Le plus important, ce n’est pas seulement de choisir le bon outil, mais de bien savoir l’utiliser. 💪

Grâce aux outils de Sass, vous allez rendre votre vie de développeur CSS beaucoup plus facile, à la fois en réduisant la quantité de code à écrire et en le rendant plus simple à modifier et à maintenir à l’avenir.

Notre site n’utilise qu’une poignée de couleurs, certes, mais nous les utilisons sans arrêt. Entre nous, retenir les couleurs par leur codes couleur hexadécimaux tels que #16FFBD et  #001534 et savoir quelles couleurs ils représentent, c’est compliqué et pas franchement très pratique. Pour y remédier, je n’ai pour le moment qu’une solution : parcourir mon fichier, chercher une autre instance de cette couleur, et la copier-coller. Mais c’est une sacrée perte de temps et cela peut devenir rapidement pénible et surtout dangereux.

Le client pourrait demander un changement de couleur sans prévenir, et vous allez devoir repasser en revue touuuuuut le fichier pour modifier les valeurs à la main, une par une. C’est souvent comme ça que les erreurs apparaissent.

Juste en jetant un coup d’œil à notre bloc  .form, vous pouvez voir que nous avons systématiquement répété les quatre mêmes valeurs hexadécimales (#15DEA5, #D6FFF5,  #001534, #fff)

.form {
width: 100%;
padding-bottom: 1.5rem; 
}
.form__heading {
  width: 100%;
  color: #fff;
  text-shadow: 0.55rem 0.55rem #11af82;
  background: #15DEA5;
  line-height: 5rem;
  padding: 1.5rem; 
}
.form__field label {
  color: #D6FFF5;
  display: block;
  font-size: 2rem;
  line-height: 2rem;
  padding-top: 1.5rem; 
}
.form__field input {
  width: 100%;
  background: #001534;
  border: 0.1rem solid #15DEA5;
  padding: 1.5rem;
  color: #D6FFF5; 
}
.form__field textarea {
  width: 100%;
  color: #15DEA5;
  background: #001534;
  border: 0.1rem solid #15DEA5;
  outline: none;
  padding: 1.5rem;
  margin-bottom: 0.75rem;
}

Comment pourrions-nous rendre ce code plus lisible et organisé ? Mmmh... si on pouvait définir une couleur une seule fois et la référencer à chaque fois qu’on en a besoin, ce serait vraiment pratique. Eh bien, heureusement pour nous, il existe bien une solution pour le faire, et c’est une variable ! 🙌

Les variables sont comme des boîtes. On les remplit avec quelque chose, dans notre cas des valeurs de couleurs (ou des amandes) et on y colle une étiquette pour savoir ce qu’il y a dedans. Ainsi, votre collègue Anna sait que ce sont vos amandes, dans le placard, et n’y touche pas (je t’ai à l’œil, Anna). Et en plus, vous savez exactement ce qu’il y a dedans grâce à l’étiquette.

Maintenant, vous pouvez emmener cette boîte partout avec vous. Non, parce qu’avec Anna, on n’est jamais trop prudent (je rigole 😏). Quand j’ai besoin du contenu du tupperware, pour définir la couleur d’un texte par exemple, il me suffit de l’ouvrir. Bon appétit ! 🤤

En programmation, l’équivalent de remplir son tupperware de nourriture s’appelle déclarer une variable. Pour déclarer une variable dans Sass, il vous suffit de taper un symbole dollar ($) suivi de son nom, puis deux points et enfin la valeur que vous souhaitez lui donner :

$mint: #15DEA5;

À présent, si vous regardez le CSS compilé, vous verrez… absolument rien du tout.

C’est parce que lorsque Sass compile les variables en CSS, il remplace l’instance de la variable directement par sa valeur, et comme vous n’avez pas encore utilisé cette variable, il n’y a absolument rien à compiler.

OK, utilisons cette variable ! 💪 Modifions à présent les couleurs vert menthe (#15DEA5) de notre  .form  pour utiliser notre nouvelle variable. Pour implémenter une variable dans Sass, tapez le nom de la variable à l’endroit où vous auriez normalement inséré la valeur correspondante. Dans notre cas pour remplacer #15DEA5  par notre variable $mint , ça nous donne :

$mint: #15DEA5;
.form {
width: 100%;
padding-bottom: 1.5rem; 
}
.form__heading {
  width: 100%;
  color: #fff;
  text-shadow: 0.55rem 0.55rem #11af82;
  background: $mint;
  line-height: 5rem;
  padding: 1.5rem; 
}
.form__field label {
  color: #D6FFF5;
  display: block;
  font-size: 2rem;
  line-height: 2rem;
  padding-top: 1.5rem; 
}
.form__field input {
  width: 100%;
  background: #001534;
  border: 0.1rem solid $mint;
  padding: 1.5rem;
  color: #D6FFF5; 
}
.form__field textarea {
  width: 100%;
  color: $mint;
  background: #001534;
  border: 0.1rem solid $mint;
  outline: none;
  padding: 1.5rem;
  margin-bottom: 0.75rem;
}

On peut voir que nous avons des instances de notre variable $mint partout où nous avions auparavant utilisé notre valeur hex vert menthe #15DEA5

Maintenant, quand vous regardez le CSS compilé, vous voyez bien que Sass a remplacé le nom de la variable par la valeur correspondante :

.form {
width: 100%;
padding-bottom: 1.5rem;
}
.form__heading {
width: 100%;
color: #fff;
text-shadow: 0.55rem 0.55rem #11af82;
background: #15DEA5;
line-height: 5rem;
padding: 1.5rem;
}

.form__field label {
color: #D6FFF5;
display: block;
font-size: 2rem;
line-height: 2rem;
padding-top: 1.5rem;
}
.form__field input {
width: 100%;
background: #001534;
border: 0.1rem solid #15DEA5;
padding: 1.5rem;
color: #D6FFF5;
}
.form__field textarea {
width: 100%;
color: #15DEA5;
background: #001534;
border: 0.1rem solid #15DEA5;
outline: none;
padding: 1.5rem;
margin-bottom: 0.75rem;
}

Puisqu’il y aura forcément des changements, ne soyez pas trop spécifique lorsque vous nommez vos variables. $mint fonctionne très bien pour un vert menthe c’est sûr, mais imaginons que le client se lasse du vert et veuille du rose. Super simple : on a juste à modifier la valeur hex :

$mint: #ffa7c2;

Sauf qu’à présent, $mint n’a plus aucun sens, comme nous avons une couleur rose à la place. Le problème, c’est que nous l’utilisons un paquet de fois dans notre codebase et ça peut porter à confusion, si un jour un autre développeur récupère votre code : il ou elle pensera en voyant le nom que la couleur est vert menthe et non rose. Deux solutions s’offrent à nous : soit on garde $mint comme nom de variable et on fait avec (mauvaise idée), soit on donne un nouveau nom plus adéquat à la variable :

$pink:#ffa7c2;

Aaaaaargh ! Qu’est-ce qui s’est passé ? On a cassé Internet (ou du moins notre fichier Sass) ! 😨 L’erreur stipule "Undefined variable..." (ou variable non définie en français).

Tout notre code utilise encore la variable $mint, sauf qu’elle n’existe plus. Quand nous avons changé son nom en $pink, $mint a cessé d’exister, sauf que nous l’utilisons encore dans toute notre codebase. Ooooooops. Pour que ça fonctionne, on doit remplacer tous les $mint par des $pink .

Une meilleure idée pour éviter ce genre de soucis serait de nommer la variable en fonction de son rôle plutôt que son contenu. Par exemple, les mains d’Anna sont remplies de mes amandes aujourd’hui, mais demain elles pourraient être remplies de mes noisettes. Il serait donc plus logique de lui donner le nom de “voleuse de graines”, parce que visiblement elle n’a pas l’intention de s’arrêter.

Au lieu de $mint/$pink, il est préférable d’opter pour quelque chose comme $color-primary (couleur principale en anglais). Le nom de la variable vous indique que son rôle est de stocker la couleur principale de votre site, qu’il s’agisse de vert menthe, de rose ou de jaune fluo. Là où ça devient intéressant, c’est que lorsque vous vous replongerez dans votre code d’ici quelques mois ou quelques années, le nom $color-primary  vous dira toujours quelque chose. Une variable appelée $mint qui contient du rose vous donnera certainement une sacrée migraine...

Essayez par vous-même !

Dans cet exercice, remplacez les couleurs dans le code par des variables que vous allez créer.

Et les variables, ce n’est pas que pour les couleurs ! Il y a huit types de données en tout dans Sass :

• les couleurs : on vient d’en parler ;

• les chaînes de caractères (strings) : terme de programmation signifiant du texte ;

• les nombres : oui, des nombres ;

• les listes et maps : des collections de n’importe quels éléments ci-dessus. On en parlera plus tard ;

• et trois autres que vous pouvez laisser de côté pour le moment : les booléens (boolean), les nulls et les fonctions.

• Les variables stockent des valeurs que vous pouvez réutiliser dans tout votre codebase.

• Pour définir une variable, tapez le signe dollar ($) puis le nom de la variable : $variable-name.  

• Quand vous modifiez la valeur de la variable, cela modifiera cette valeur partout où la variable a été utilisée.

• Les variables peuvent stocker tous les types de données de Sass : couleur, taille et listes de valeurs. 

Les variables nous permettent de stocker des valeurs que l’on peut réutiliser dans notre codebase, mais serait-il possible d’y stocker un ensemble de règles ? La réponse est non. Mais il existe bien quelque chose pour nous sauver de ce pétrin : les mixins. Et on en parle justement dans le prochain chapitre 😉.