Yksikön lisääminen oikein numeroon - CSS-temppuja

Anonim

Muunnettaessa yksikköön kuulumaton numero pituudeksi, kestoksi, kulmaksi tai muuksi, ihmiset yleensä yksinkertaisesti liittävät yksikön merkkijonona, kuten tämä:

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

Vaikka tämä menetelmä toimii, se ei ole kaukana ihanteellisesta, koska se johtaa implisiittisesti alkuperäisen arvon heittämiseen merkkijonoksi. Itse asiassa, jos yrität tehdä matematiikkaa $lengtharvon mukaan, näet, että Sass heittää virheen nopeasti, koska se ei voi tehdä matemaattisia operaattoreita merkkijonolla.

Voit kiertää tämän ongelman kahdella tavalla:

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

Mikä tahansa näistä menetelmistä tuottaa oikein numeron odotetusti eikä merkkijonoa.