Adicionando unidade corretamente ao número - CSS-Tricks

Anonim

Ao converter um número sem unidade em um comprimento, duração, ângulo ou qualquer outra coisa, as pessoas tendem a simplesmente anexar a unidade como uma string, assim:

$value: 42; $length: $value + px; // 42px

Embora esse método funcione, está longe de ser ideal porque resulta na conversão implícita do valor inicial como uma string. Na verdade, se você tentar fazer matemática com o $lengthvalor de agora em diante, verá que o Sass rapidamente emite um erro porque não pode fazer operadores matemáticos com uma string.

Para contornar esse problema, há duas maneiras de fazer isso corretamente:

$value: 42; $length: $value + 0px; // 42px
$value: 42; $length: $value * 1px; // 42px

Qualquer um desses métodos produzirá corretamente um número conforme o esperado e não uma string.