SASS @para regla

La regla @for en SASS se usa para contar hacia arriba o hacia abajo de un número a otro y verificar la sección para cada número que se encuentra entre el rango dado. A cada número se le asigna un nombre de variable al que se puede acceder en el bucle. Se puede utilizar de dos formas:

1. de principio a fin: en este tipo, el “comienzo a fin” incluye el número final como parte del conteo.

Sintaxis:

@for <variable> from <expression> through <expression> {

    /* Body of loop that will be executed 
    when the condition is true */
}

Ejemplo: En este ejemplo, usaremos la sintaxis through. La parte #{$i} es la sintaxis para combinar una variable (i) con texto para formar una string.

@for $i from 1 through 3 {
    .col-#{$i} { width: 100%/3 * $i; }
}

Producción:

.col-1 {
  width: 33.3333333333%;
}

.col-2 {
  width: 66.6666666667%;
}

.col-3 {
  width: 100%;
}

2. principio a fin: en este tipo, el “comienzo a fin” excluye el número final como parte del conteo.

Sintaxis:

@for <variable> from <expression> to <expression> {

    /* Body of loop that will be executed 
       when the condition is true */
}

Ejemplo:

@for $i from 1 to 5 {
  .column-#{$i} { width: 100%/4 * $i; }
}

Producción:

.column-1 {
  width: 25%;
}

.column-2 {
  width: 50%;
}

.column-3 {
  width: 75%;
}

.column-4 {
  width: 100%;
}