Adăugarea corectă a unității la număr - CSS-Tricks

Anonim

Atunci când convertiți un număr fără unități într-o lungime, durată, unghi sau orice altceva, oamenii au tendința de a adăuga pur și simplu unitatea ca un șir, astfel:

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

În timp ce această metodă funcționează, este departe de a fi ideală, deoarece are ca rezultat distribuirea implicită a valorii inițiale ca șir. Într-adevăr, dacă încercați să faceți matematică cu $lengthvaloarea de acum înainte, veți vedea că Sass aruncă rapid o eroare, deoarece nu poate face operatorii matematici cu un șir.

Pentru a rezolva această problemă, există două moduri de a face acest lucru corect:

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

Oricare dintre aceste metode va produce corect un număr așa cum era de așteptat și nu un șir.