Directiva @for en SASS

Con la directiva @for se pueden generar estilos específicos en la cantidad indicada por una variable contadora. La primera variante de escritura @for se ve así:

scss@for $var from (inicio) through (fin)

En este caso, el rango incluye estrictamente los valores (inicio) y (fin). Vale la pena prestar atención a que (inicio) y (fin) deben devolver números enteros, ya que establecen la dirección de la cuenta, es decir, si (inicio) es menor que (fin), el contador aumentará y, correspondientemente, si es al revés, disminuirá.

Consideremos el funcionamiento de la directiva @for en la primera variante de sintaxis con el siguiente ejemplo:

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

Resultado de la compilación:

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

En la segunda variante, la escritura se ve de la siguiente manera:

scss@for $var from (inicio) to (fin)

Donde aquí el valor (fin) se excluye.

Tomemos el ejemplo anterior y escribámoslo en la segunda variante:

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

Ahora preste atención al código resultante:

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;
  }
}