• 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

Utilisez les boucles dans Sass pour fluidifier votre code

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

Dans le chapitre précédent, nous avons créé une mixin qui nous facilite grandement la création de différents modificateurs pour vos textes :

$txt-input-palette: (
active: (
bg: $colour-primary,
border: $colour-primary,
txt: $colour-white,
),
focus: (
bg: $colour-primary,
border: $colour-primary,
txt: $colour-white,
),
invalid: (
bg: $colour-invalid,
border: $colour-white,
txt: $colour-white,
)
);
@mixin txt-input-palette($state) {
$palette: map-get($txt-input-palette, $state);
border: .1rem solid map-get($palette, border);
background-color: map-get($palette, bg);
color: map-get($palette, txt);
}

Il nous reste encore à créer le sélecteur adapté pour chaque état et à appliquer la mixin avec le bon argument. Sauf que c’est un travail répétitif et fastidieux, exactement ce que Sass nous invite à éviter.

Créez des boucles !

Comment faire ? 🤔

En programmation, il existe ce qu’on appelle des boucles. Une boucle est une structure qui permet d’exécuter un certain nombre de fois une série d’instructions.

Euh, pardon… ? 😨

Prenez une boîte de biscuits. Dans le paquet, il y a 45 délicieux cookies aux pépites de chocolat. 🍪 Vous êtes dans la cuisine et vous avez envie d’un petit cookie, la séquence suivante démarre :

  • Vous ouvrez le paquet.

  • Vous hésitez sur le fait d’avoir ou non besoin de manger ce cookie.

  • Vous décidez que non mais bon, vous les avez achetés, alors autant en manger un, non ?

  • Vous mangez un cookie et nagez en plein bonheur.

  • Vous vous sentez un peu coupable.

  • Vous refermez le paquet et vous dites que c’était juste un seul cookie..

Ensuite vous rouvrez le paquet. Encore une fois. Et vous recommencez la même chose, encore et encore, jusqu’à ce que vous ayez mangé tous les cookies du paquet. Certains parleraient de cercle vicieux, personnellement je préfère le terme de boucle ! Une boucle pleine de culpabilité peut-être, mais ça reste une boucle. Dans notre cas, la boucle n’est rien d’autre que la répétition d’un ensemble d’actions sur notre paquet de cookies, elle se termine lorsque le paquet est vide. On pourrait la traduire par : “tant qu’il y a encore des cookies dans le paquet”, je peux effectuer à la suite toutes les actions précédentes. 

En appliquant une boucle au sein de votre mixin de texte, Sass peut automatiquement créer les bons sélecteurs et les bons ensembles de règles pour chaque élément de la map que vous lui soumettez. Voilà qui semble bien plus propre et moins laborieux que de créer manuellement un bloc pour chacun des différents textes, non ?

Sass met à notre disposition plusieurs types de boucles, mais nous n’en utiliserons qu’une : la boucle @each. C’est la plus simple à mettre en place et elle fonctionne très bien avec maps. Puisque tous les types de boucles de Sass nous donneront les mêmes résultats à la fin, autant choisir l’option la plus simple.

Quand vous écrivez une boucle @each dans Sass, vous indiquez que pour chaque paire clé/valeur d’une $map vous voulez effectuer une tâche, et c’est exactement comme ça qu’on la définit :

@each $key, $value in $map {
}

C’est parti ! On définit notre boucle grâce le mot clé @each (pour chaque...). Puis, on déclare les éléments dont il s’agit : chaque $key et chaque $value. Ensuite, on lui dit où aller les chercher. Ce qui nous donne : pour chaque $key et $value dans cette $map.

Sass entre dans $map et crée des variables temporaires $key et $value pour chaque ensemble clé/valeur qu’il trouve. Ces variables n’existent que dans cette itération de la boucle. Elles n’existent ni avant ni après l’itération, et sont invisibles pour le reste du code.

Pour chacun et jusqu’au dernier

Nous allons utiliser la boucle @each pour créer tous les ensembles de règles de pseudosélecteurs pour tous nos états .form__input label, et les remplir de leur ensemble de règles d’un seul coup ! Modifions un peu notre mixin  txt-input-palette pour qu’elle le fasse à notre place.

La première chose que vous devez faire est de passer toute la map  $txt-input-palette  en tant qu’argument, plutôt que juste la clé $state. Votre boucle va itérer sur chaque clé de la map, il n’y a donc pas besoin de les nommer manuellement :

@mixin txt-input-palette($palettes) {
$palette: map-get($txt-input-palette, $state);
border: .1rem solid map-get($palette, border);
background-color: map-get($palette, bg);
color: map-get($palette, txt);
}

Vous pouvez aussi supprimer la variable $palette et sa fonction map-get(). La boucle @each ira aussi chercher automatiquement les valeurs pour chaque clé dans la map :

@mixin txt-input-palette($palettes) {
border: .1rem solid map-get($palette, border);
background-color: map-get($palette, bg);
color: map-get($palette, txt);
}

À présent, vous pouvez commencer à utiliser @each pour automatiser votre travail !

@mixin txt-input-palette($palettes) {
@each $state, $palette in $palettes{
border: .1rem solid map-get($palette, border);
background-color: map-get($palette, bg);
color: map-get($palette, txt);
}
}

On regarde ensemble : ici nous avons ajouté une boucle @each qui va itérer tout au long de notre map  $palettes, tandis que les variables  $state  et  $palette  stockent chacune la clé et la valeur. Ensuite, en itérant à chaque passage, cela crée des règles pour  border, background-color, et la color du texte.

Malgré les nombreuses itérations, ils sont tous placés dans un même sélecteur :

@mixin txt-input-palette($palettes) {
@each $state, $palette in $palettes{
border: .1rem solid map-get($palette, border);
background-color: map-get($palette, bg);
color: map-get($palette, txt);
}
}
.form {
&__field {
& input {
@include txt-input-palette($txt-input-palette);
}
}
}
.form__field input {
border: 0.1rem solid #15DEA5;
background-color: #001534;
color: #15DEA5;
border: 0.1rem solid #15DEA5;
background-color: #15DEA5;
color: #fff;
border: 0.1rem solid #15DEA5;
background-color: #15DEA5;
color: #fff;
border: 0.1rem solid #fff;
background-color: #DB464B;
color: #fff;
}

Pas tout à fait ce que nous avions prévu à la base...

Le but était de créer le sélecteur pour chaque état au fur et à mesure que notre boucle traitait les éléments de la map... On va trouver une solution. 💪 Nous allons utiliser l’esperluette (vous vous en souvenez ? 😃) suivie par deux points pour attribuer le nom de chaque  $state  à un pseudosélecteur :

@mixin txt-input-palette($palettes) {
@each $state, $palette in $palettes{
&:#{$state}{
border: .1rem solid map-get($palette, border);
background-color: map-get($palette, bg);
color: map-get($palette, txt);
}
}
}

Cet ensemble hashtag/accolade/$variable est tout nouveau, mais pas de panique, il s’agit simplement de la syntaxe d’interpolation (#{variable}) de Sass. 

Alerte : mot trop compliqué, je veux des explications !

Okay. On peut aussi remplacer syntaxe d’interpolation par substitution de variable. Celle-ci n’est pas exclusive à Sass et existe dans de nombreux langages, comme Ruby par exemple. Elle vous permet d’utiliser la valeur d’une variable au sein d’une chaîne de caractères (ou string) et de la remplacer par une autre.  

Dans notre cas, elle nous permet de dire que l’on veut utiliser la valeur de la variable   $state  en tant que nom de pseudosélecteur au lieu de le taper nous-mêmes.

Maintenant, quand vous regardez le CSS compilé, vous voyez un pseudosélecteur pour chaque état, avec les bonnes valeurs de couleurs renseignées au sein de l’ensemble de règles :

.form__field input:active {
border: 0.1rem solid #15DEA5;
background-color: #15DEA5;
color: #fff;
}
.form__field input:focus {
border: 0.1rem solid #15DEA5;
background-color: #15DEA5;
color: #fff;
}
.form__field input:invalid {
border: 0.1rem solid #fff;
background-color: #DB464B;
color: #fff;
}

Désormais,  txt-input-palette générera un pseudosélecteur pour l’état si cet état n’est pas “inactif”. Vérifions si tout marche correctement :

.form__field input:active {
border: 0.1rem solid #15DEA5;
background-color: #15DEA5;
color: #fff;
}
.form__field input:focus {
border: 0.1rem solid #15DEA5;
background-color: #15DEA5;
color: #fff;
}
.form__field input:invalid {
border: 0.1rem solid #fff;
background-color: #DB464B;
color: #fff;
}

Et voilà ! ☀️ Maintenant, dès que vous changez une valeur de couleur ou une combinaison de palettes, les règles s’appliquant au texte seront automatiquement modifiées. Et ce n’est pas tout ! Si vous ajoutez un nouvel état dans   $txt-input-palette, Sass l’ajoutera à votre CSS compilé tout seul, sans que vous ayez rien à faire. La classe, non ?

Et même s’il vous prend l’envie d’ajouter 20 palettes de couleur à votre map, ou si vous les supprimiez toutes sauf une, votre CSS se mettrait à jour tout seul. Pas d’embrouilles, pas de couper/coller/modifier inutiles. Plus de chasse à la coquille dans un océan de code, fini tout ça ! Grâce aux boucles, créer et maintenir votre codebase n’est pas plus compliqué que de modifier les valeurs dans une map et cliquer sur Enregistrer. Rien de plus simple !

Essayez par vous-même !

Dans l’exercice qui suit, créez une boucle pour générer les couleurs des boutons fournis dans l’exercice.

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.

En résumé
  • Une boucle est un ensemble d’actions qui se répètent.

  • On définit une boucle à l’aide du mot clé @each, suivi de la $key, la  $value, et la $map associées.

  • La syntaxe d’interpolation vous permet d’utiliser la valeur d’une variable au sein d’une chaîne de caractères.

Notre site commence à avoir une bonne tête ! Mais de nos jours, il doit être adapté sur tous types d’écrans, que ce soit un ordinateur, un smartphone ou une tablette.

Dans le chapitre suivant, nous allons voir comment Sass peut vous aider à rendre votre site responsive. 😎

Example of certificate of achievement
Example of certificate of achievement