Üksuse õige lisamine arvule - CSS-trikid

Anonim

Ühikuvaba numbri teisendamisel pikkuseks, kestvuseks, nurgaks või muuks muudavad inimesed ühiku lihtsalt stringina, näiteks:

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

Kuigi see meetod töötab, pole see kaugeltki ideaalne, kuna selle tulemuseks on algväärtuse vaikimisi stringina valamine. Tõepoolest, kui proovite $lengthnüüdsest väärtusega matemaatikat teha , näete, et Sass viskab kiiresti vea, kuna ta ei saa matemaatikaoperaatoreid stringiga teha.

Selle probleemi lahendamiseks on selle tegemiseks kaks võimalust.

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

Mõni neist meetoditest annab korrektselt arvukuse, mitte stringi.