Boucles

Plutôt que d'écrire à la main plusieurs classes CSS similaires avec une légère variation, SCSS permet de créer des boucles générant pour nous ces classes.

@for

Les boucles @for fonctionnent de façon très similaire aux boucles for en JavaScript. Il faut premièrement définir une variable, lui donner une valeur de départ et une valeur à atteindre.

Par exemple, afin de configurer la taille de plusieurs titres (headings) à l'aide d'une boucle @for, il est possible de faire:

@for $index from 1 to 5 {
  .h#{$index} {
    font-size: 40px - ($index * 5);
  }
}

Ce qui produit le code suivant:

h1 { font-size: 35px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }

through

Lorsque through est utilisé à la place de to, le chiffre à atteindre dans la boucle est inclus.

Par exemple, le même code que précédemment, mais avec through:

@for $index from 1 through 5 {
  .h#{$index} {
    font-size: 40px - ($index * 5);
  }
}

Produit le code suivant:

h1 { font-size: 35px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 15px; }

Où le nombre 5 est inclus.

@each

Les boucles @each ressemblent aux boucles @for à la différence qu'elles servent à itérer sur une liste d'items. À tour de rôle, une variable prend la valeur de chaque item dans la liste et devient accessible.

Par exemple, une de boucle configurant la couleur de plusieurs messages peut être écrite ainsi avec une boucle @each:

$colorsArr: red, yellow, blue, gray;

@each $color in $colorsArr {
  .msg-#{$color} {
    background-color: $color;
  }
}

Ce qui produit le code suivant:

.msg-red { background-color: red; }
.msg-yellow { background-color: yellow; }
.msg-blue { background-color: blue; }
.msg-gray { background-color: gray; }

Map

Dans certains cas, identifié une valeur à l'aide d'une clé dans une boucle peut s'avérer très pratique. Heureusement, la boucle @each peut aussi itérer sur un tableau de clés et de valeurs.

Par exemple, pour créer une rapidement des classes ayant des noms textuels et des valeurs numériques il est possible de faire:

$sizesArr: (small: 12px, medium: 16px, big: 30px);
@each $key, $value in $sizesArr {
  .text-#{$key} {
    font-size: $value;
  }
}

Ce qui produit le code suivant:

.text-small { font-size: 12px; }
.text-medium { font-size: 16px; }
.text-big { font-size: 30px; }