Regla SASS @for y @while

La regla @for 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 dado. Para excluir el último número, use to y para incluirlo, use through.

Sintaxis:

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

Y

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

Ejemplo:

$gfg: green;
  
@for $i from 1 through 5 {
  ul:nth-child(2n + #{$i}) {
    background-color: darken($gfg, $i * 5%);
  }
}

Producción:

ul:nth-child(2n+1) {
  background-color: #006700;
}

ul:nth-child(2n+2) {
  background-color: #004d00;
}

ul:nth-child(2n+3) {
  background-color: #003400;
}

ul:nth-child(2n+4) {
  background-color: #001a00;
}

ul:nth-child(2n+5) {
  background-color: #000100;
}

La regla @while analiza la sección solo si la expresión dada es verdadera. La sección continúa compilando hasta que devuelve falso, luego la sección detiene la compilación.

Sintaxis:

@while <expression> { 
    ... 
}

Ejemplo:

@function scale-below($value, $base, $ratio: 2) {
  @while $value > $base {
    $value: $value / $ratio;
  }
  @return $value;
}
  
$normal-font-size: 22px;
gfg {
  font-size: scale-below(20px, 12px);
}

Producción:

gfg {
  font-size: 10px;
}

Veracidad y falsedad: algunos otros valores también se pueden usar en cualquier lugar, se permiten verdadero o falso. Los valores false y null significan que Sass considera que muestran falsedad y que hace que las condiciones fallen. Todos los demás valores son verdaderos. Entonces Sass considera que tienen éxito con las condiciones. Algunos lenguajes consideran más valores de falsedad que solo falso y nulo, sin incluir a Sass en esa lista. Las strings vacías, las listas vacías y el número 0 se consideran verdaderos en Sass.