Korrekt legge til enhet til nummer - CSS-triks

Anonim

Når du konverterer et enhetsfritt tall til en lengde, varighet, vinkel eller hva som helst, har folk en tendens til å bare legge til enheten som en streng, slik:

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

Mens denne metoden fungerer, er den langt fra ideell fordi den resulterer i implisitt å kaste den opprinnelige verdien som en streng. Faktisk, hvis du prøver å gjøre matematikk med $lengthverdien fra nå av, vil du se at Sass raskt kaster en feil fordi den ikke kan gjøre matteoperatører med en streng.

For å omgå dette problemet er det to måter å gjøre dette på riktig måte:

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

Noen av disse metodene vil produsere et tall som forventet og ikke en streng.