@while

A regra @while, escrita @while <expression> { ... }, avalia o seu bloco se sua expressão retornar true. Então, se sua expressão continuar a retornar true, avalia o seu bloco novamente. Isto continua até a expressão finalmente retornar false.

SCSS Syntax

@use "sass:math";

/// Divide `$value` por `$ratio` até estiver abaixo de `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}

Sass Syntax

@use "sass:math"

/// Divide `$value` por `$ratio` até estiver abaixo de `$base`.
@function scale-below($value, $base, $ratio: 1.618)
  @while $value > $base
    $value: math.div($value, $ratio)
  @return $value



$normal-font-size: 16px
sup
  font-size: scale-below(20px, 16px)

CSS Output

sup {
  font-size: 12.3609394314px;
}

⚠️ Atenção!

Embora @while é necessário para algumas folhas de estilos particularmente complexas, estarás melhor usando ou @each ou @for se qualquer um delas funcionar. São mais claras para o leitor, e frequentemente também mais rápido de compilar:

Veracidade e FalsidadeVeracidade e Falsidade permalink

Em qualquer parte que true ou false forem permitidos, podes usar outros valores também. Os valores false e null são falsos, o que significa que a Sass considera-os para indicar falsidade e motivos de condições falharem. Todo outro valor é considerado verdadeiro, então a Sass considera-os para funcionar como true e motivo das condições serem bem-sucedidas.

Por exemplo, se quiseres verificar se uma sequência de caracteres contém um espaço, podes apenas escrever string.index($string, ""). A função string.index() retorna null se a sequência de caracteres não for encontrada e de outro modo um número.

⚠️ Atenção!

Algumas linguagens consideram mais valores falsos do que false e null. A Sass não é uma dessas linguagens! Sequências de caracteres vazias, listas vazias, e o número 0 são todos verdadeiros na Sass.