Directive @for dans SASS

Avec la directive @for on peut générer des styles spécifiques en quantité, indiquée par une variable compteur. La première variante d'écriture de @for ressemble à ceci :

scss@for $var from (début) through (fin)

Dans ce cas, la plage inclut strictement les valeurs (début) et (fin). Il convient de noter que (début) et (fin) doivent renvoyer des nombres entiers, car ils définissent le sens du comptage, c'est-à-dire que si (début) est inférieur à (fin), le compteur augmentera et respectivement, si c'est l'inverse - il diminuera.

Examinons le fonctionnement de la directive @for dans la première variante de syntaxe sur l'exemple suivant :

styles.scss@for $count from 1 through 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Résultat de la compilation :

styles.css.li-1 {
  width: 1px; 
}
.li-2 {
  width: 2px; 
}
.li-3 {
  width: 3px; 
}
.li-4 {
  width: 4px; 
}
.li-5 {
  width: 5px; 
}

Dans la deuxième variante, l'écriture se présente comme suit :

scss@for $var from (début) to (fin)

Ici, la valeur (fin) est exclue.

Prenons l'exemple précédent et écrivons-le dans la deuxième variante :

styles.scss@for $count from 1 to 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Maintenant, regardez attentivement le code résultant :

styles.css.li-1 {
  width: 1px; 
}

.li-2 {
  width: 2px; 
}

.li-3 {
  width: 3px; 
}

.li-4 {
  width: 4px; 
}

styles.scss@for $var from 5 through 1 {
  li-#{$var} {
    padding: 10 * $var + px;
  }
}

styles.scss@for $var from 1 to 3 {
  .navbar-link-#{$var} {
    color: blue;
    width: 10px * $var;
  }
}