Présentation des structures de contrôle Sass
Sass met à notre disposition quatre règles @ nous permettant de générer des structures de contrôle qui vont se manifester soit sous forme de conditions (le code ne sera exécuté que si telle condition est remplie), soit sous forme de boucles (le code sera exécuté un certain nombre de fois tant qu’une condition de sortie de boucle n’est pas vérifiée).
La condition d’exécution d’une condition ou d’une boucle prendra souvent la forme d’une comparaison : nous allons comparer une valeur à une autre et si la comparaison est vérifiée par Sass, c’est-à-dire si elle est évaluée à “vraie” (true), alors on exécutera le code.
Ces règles sont les suivantes :
@ifet@elsepermettent d’exécuter un bloc de code SI (if) une condition est remplie ou d’exécuter un autre code SINON (else) ;@eachévalue un bloc pour chaque élément d’une liste ou chaque paire d’une map (le mapping correspond au fait de lier certaines données entre elles) ;@forévalue un bloc un nombre de fois précisé lors de la création de la règle (le nombre d’évaluation est connu à l’avance) ;@whileévalue un bloc jusqu’à ce qu’une certaine condition de sortie soit remplie (le nombre d’évaluation n’est pas connu à l’avance).
Nous allons voir comment utiliser ces règles dans la suite de cette leçon. Cependant, je vais avant tout devoir vous parler des opérateurs Sass puisque les conditions qu’on va créer pour nos structures de contrôle vont faire un usage intensif de ces opérateurs.
Opérateurs Sass et précédence (ordre de priorité) des opérateurs
Un “opérateur” est un signe ou un mot qui permet de réaliser une opération. Il existe des opérateurs de différents types qui permettent d’effectuer des types d’opérations différentes : opérateurs arithmétiques, opérateurs logiques, opérateurs de concaténation, etc.
Les opérateurs de concaténation Sass
Concaténer signifie mettre bout-bout. Un opérateur de concaténation est un opérateur qui permet donc “d’additionner” plusieurs chaines de caractères entre elles.
Sass supporte trois opérateurs de concaténation ou opérateurs de chaines de caractères différent :
| Opérateur | Description |
|---|---|
| + | Retourne une chaine qui contient les deux expressions de départ concaténées |
| – | Retourne une chaine qui contient les deux expressions de départ concaténées et séparées par “-“ |
| / | Retourne une chaine qui contient les deux expressions de départ concaténées et séparées par “/“ |
Les opérateurs arithmétiques Sass
Les opérateurs arithmétiques vont nous permettre d’effectuer des opérations arithmétiques (des calculs) entre des nombres.
Sass nous permet d’utiliser les opérateurs arithmétiques suivants :
| Opérateur | Nom de l’opération associée |
|---|---|
| + | Addition |
| – | Soustraction |
| * | Multiplication |
| / | Division |
| % | Modulo (reste d’une division euclidienne) |
Les opérateurs de comparaison Sass
Les opérateurs de comparaison nous permettent de comparer différentes valeurs entre elles. Lorsqu’on utilise un opérateur de comparaison, on demande à Sass d’effectuer la comparaison indiquées par l’opérateur. A l’issue de la comparaison, une valeur booléenne est automatiquement renvoyée : soit la valeur true si la comparaison est vérifiée par Sass, soit false si elle est jugée fausse.
Notez que le type de valeur booléen est un type de valeur qui ne possède que deux valeurs différentes : true et false.
Sass supporte les opérateurs de comparaison suivants :
| Opérateur | Définition |
|---|---|
| == | Permet de tester l’égalité sur les valeurs (renvoie true si les valeurs sont égales) |
| != | Permet de tester la différence des valeurs (renvoie true si les valeurs sont différentes) |
| < | Permet de tester si une valeur est strictement inférieure à une autre |
| > | Permet de tester si une valeur est strictement supérieure à une autre |
| <= | Permet de tester si une valeur est inférieure ou égale à une autre |
| >= | Permet de tester si une valeur est supérieure ou égale à une autre |
Les opérateurs logiques Sass
Les opérateurs logiques sont des opérateurs qui vont principalement être utilisés au sein de conditions. Ils vont nous permettre de créer des tests plus robustes.
Sass supporte trois opérateurs logiques : and, or et not.
L’opérateur logique and nous permet d’effectuer plusieurs comparaisons. Grosso modo, on va utiliser cet opérateur pour créer des codes comme cela : “si telle comparaison est vérifiée ET si telle autre comparaison l’est aussi…”.
L’opérateur and renvoie la valeur true uniquement si chaque comparaison renvoie true.
L’opérateur logique or va lui renvoyer true dès qu’une comparaison est évaluée à true.
Enfin, l’opérateur logique not inverse le résultat logique d’une comparaison. Si une comparaison est évaluée à true de base et qu’on utilise l’opérateur not, par exemple, le résultat final sera false.
Précédence (ordre de priorité) des opérateurs
Parfois, nos conditions et boucles vont utiliser plusieurs opérateurs ensemble (notamment dans le cas où des opérateurs logiques sont impliqués).
Il est alors indispensable de savoir dans quel ordre les différents opérateurs vont être lus afin de créer des conditions et boucles qui nous permettent d’arriver au résultat voulu.
Sass a un ordre de priorité assez standard. Les opérateurs vont être traités dans l’ordre suivant (du plus prioritaire ou moins prioritaire) :
- Les opérateurs not et de concaténation +, -, et / ;
- Les opérateurs arithmétiques *, / et % ;
- Les opérateurs arithmétiques + et – ;
- Les opérateurs >, <, >=, <= ;
- Les opérateurs == et != ;
- L’opérateur and ;
- L’opérateur or.
Utilisation des structures de contrôle Sass
Maintenant que nous avons vu les opérateurs, nous allons pouvoir créer nos structures de contrôle à proprement parler. Je vais ici me contenter de vous présenter les structures if et while.
La condition if… else
La règle @if permet de créer une structure conditionnelle if. Cette structure conditionnelle permet d’exécuter un code si une expression (la condition dans la condition) est évaluée à true.
La règle @if est souvent accompagnée d’un règle @else qui permet d’exécuter un autre bloc de code dans le cas où l’expression du if est évaluée à false.
Ici, on commence par créer un mixin qu’on appelle “theme” et quel on passe une variable $light-theme avec une valeur true par défaut. Cette valeur par défaut sera utilisée si aucune valeur n’est fournie lorsqu’on tentera d’inclure le mixin par la suite.
Dans notre mixin, on utilise une condition if…else centrée sur la valeur de $light-theme. Si $light-theme contient la valeur true ou une valeur évaluée à true, les propriétés dans le @if s’appliqueront. Dans le cas contraire, les propriétés dans le @else vont s’appliquer.
La boucle while
On va pouvoir créer une boucle while en Sass avec une règle @while. Le principe de cette boucle est de répéter un code en boucle tant qu’une condition de sortie de boucle n’est pas vérifiée.
Il faudra donc toujours bien faire attention à créer un code dans la boucle qui fait qu’on atteint la condition de sortie à un moment ou à un autre car dans le cas contraire on va créer une boucle infinie qui va faire planter notre code.
Il faut imaginer dans cet exemple qu’on récupère la taille courante de la fenêtre dans la variable $width. On utilise ensuite une boucle while avec la règle Sass @while pour calculer la taille des marges qui doivent être appliquées à notre page en fonction de la taille de la fenêtre.
Notre boucle commence par comparer la valeur dans $margin à celle dans $width divisée par 50 et, tant qu’elle est strictement inférieure, ajoute 1 à la dernière valeur contenue dans $margin.
Lors du premier passage dans la boucle, $margin stocke 0 qui est bien strictement inférieur à 1000/50 (= 20). On rentre dans la boucle et on ajoute 1 à $margin qui stocke donc désormais 1. On retourne au début de la boucle et on teste à nouveau si $margin contient une valeur strictement inférieure à $width. Comme c’est toujours le cas, on repasse dans la boucle et on ajoute à nouveau 1 à $margin qui contient désormais 2 et ainsi de suite jusqu’à ce que la comparaison d’entrée dans la boucle soit évaluée à false.
