Pravilno dodajanje enote številki - CSS-triki

Anonim

Pri pretvorbi številke brez enote v dolžino, trajanje, kot ali kar koli drugega ljudje enoto preprosto dodajo kot niz, kot je ta:

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

Čeprav ta metoda deluje, še zdaleč ni idealna, ker povzroči implicitno oddajanje začetne vrednosti kot niz. Če boste $lengthodslej poskušali delati matematiko z vrednostjo, boste videli, da Sass hitro vrže napako, ker z vrvico ne more narediti matematičnih operatorjev.

Za rešitev te težave obstajata dva načina, kako to pravilno storiti:

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

Katera koli od teh metod bo pravilno ustvarila število, kot je bilo pričakovano, in ne niza.