Aggiunta corretta di unità al numero - Trucchi CSS

Quando si converte un numero senza unità in una lunghezza, durata, angolo o altro, le persone tendono ad aggiungere semplicemente l'unità come una stringa, in questo modo:

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

Sebbene questo metodo funzioni, è tutt'altro che ideale perché comporta il cast implicito del valore iniziale come stringa. Infatti, se d'ora in poi provi a fare matematica con il $lengthvalore, vedrai che Sass genera rapidamente un errore perché non può eseguire operatori matematici con una stringa.

Per aggirare questo problema, esistono due modi per farlo correttamente:

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

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

Uno qualsiasi di questi metodi produrrà correttamente un numero come previsto e non una stringa.