Comprendre et utiliser les boucles Sass

Présentation générale

Avec les conditions, les boucles sont le cœur même de la programmation. Elles permettent de mettre en place des algorithmes complexes permettant de résoudre des situations impossibles autrement.

Notre exemple tiré de fait réels :

TANT QUE ta chambre n'est pas propre
 range ta chambre
FIN DU TANT QUE
tu peux aller jouer

Sur notre exemple, l'enfant est coincé entre le TANT QUE et le FIN DU TANT QUE jusqu'à ce que la condition soit fausse. Dès que la condition n'est plus remplie, il peut continuer à exécuter sa journée, et donc aller jouer

En Sass, nous les utiliserons principalement pour quelque chose de beaucoup plus simple : éviter de se répéter.

Les boucles permettent d'exécuter des opérations (en sass, ce sera généralement écrire du CSS) plusieurs fois, en changeant uniquement quelques variables. De cette manière, il est possible de réduire parfois plusieurs dizaines de lignes à 5 ou 6 lignes, simplifiant grandement la compréhension et la modification du code.

Fonctionnement

Le Sass nous propose principalement deux boucles : @while et @each .

@while fonctionne exactement comme notre exemple avec l'enfant :

$current-size: 1
$sizes: 5
@while $current-size <= $sizes {
  .size-#{$current-size} {
    width: 10px * $current-size;
  }
  $current-size: $current-size + 1;
}

Notes : 
.size-#{$current-size} est ce qu'on appelle une interpolation, c'est à dire l'insertion d'une variable dans un texte, ici un nom de classe.
* est simplement le signe mathématique de la multiplication.

Ce qui nous donnera en CSS :

.size-1 {
  width: 10px;
}
.size-2 {
  width: 20px;
}
.size-3 {
  width: 30px;
}
.size-4 {
  width: 40px;
}
.size-5 {
  width: 50px;
}

Nous avons donc pu créer nos 5 classes en quelques lignes à peine, et les changements seront bien plus simples à appliquer aussi, car ils n'auront pas besoin d'être répétés 5 fois.

Il faut néanmoins faire très attention à une chose, en manipulant ce genre de boucles : les boucles infinies. Si nous n'ajoutons pas 1 à $current-sise à la fin de la boucle, elle n'aura pas de fin, et la génération du CSS échouera.

@each, enfin, permet de boucler pour chaque élément d'une liste. Ce genre de liste est bien plus simple à manipuler.

$authors: adam john wynn mason kuroir
@each $author in $authors {
.photo-#{$author} {
background: image-url("avatars/#{$author}.png") no-repeat;
  }
}

Ce qui génère en CSS :

.author-bio .photo-adam {
  background: url('/images/avatars/adam.png') no-repeat;
}
.author-bio .photo-john {
  background: url('/images/avatars/john.png') no-repeat;
}

Je pense que cet exemple se passe de commentaires car son avantage est évident : Ajouter un auteur se fait aussi simplement qu'ajouter un nom à la liste (et ajouter l'image dans le dossier, il ne faut pas oublier cette étape non plus !) 

Ce type de boucle est sans risque, contrairement à la bouche @each. N'hésitez pas à en abuser !

.author-bio .photo-wynn {
  background: url('/images/avatars/wynn.png') no-repeat;
}
.author-bio .photo-mason {
  background: url('/images/avatars/mason.png') no-repeat;
}
.author-bio .photo-kuroir {
  background: url('/images/avatars/kuroir.png') no-repeat;
} 

Les boucles sont un excellent moyen pour gagner du temps et des lignes dans votre code, mais elles mettent en avant un des points faibles des préprocesseurs : elles "masquent" le CSS qui sera généré aux yeux de celui qui l'écrit, qui perd de vie l'apparence de la feuille de style que reçoit le client.

Même si votre boucle est très belle, et qu'elle ne prend que 5 lignes de Sass, il faut penser que le navigateur recevra et devra traiter le CSS qui en est issu, et les peut être 25 000 lignes que votre boucle aura générées.

Après cette petite présentation des boucles, nous sommes prêts pour la présentation des @mixins la semaine prochaine. Cet outil vous permettra de mettre en pratique vos connaissances des boucles et des conditions, pour créer de véritables petits modules réutilisables, évolutifs et adaptables pour votre CSS.