Korjaa luku N-numeroon - CSS-temppuja

Anonim

Kun käsitellään numeroita JavaScriptissä tai millä tahansa muulla ohjelmointikielellä, on tapa katkaista luku numeroiden jälkeen n. Valitettavasti Sassissa ei ole tällaista toimintoa. Silti pyöristys- ja tarkkuusongelmia tapahtuu, kun käsitellään esimerkiksi prosenttipohjaisia ​​ruudukkojärjestelmiä.

Tässä on Sass-toteutus toFixed():

/// toFixed() function in Sass /// @author Hugo Giraudel /// @param (Number) $float - Number to format /// @param (Number) $digits (2) - Number of digits to leave /// @return (Number) @function to-fixed($float, $digits: 2) ( $sass-precision: 5; @if $digits > $sass-precision ( @warn "Sass sets default precision to #($sass-precision) digits, and there is no way to change that for now." + "The returned number will have #($sass-precision) digits, even if you asked for `#($digits)`." + "See https://github.com/sass/sass/issues/1122 for further informations."; ) $pow: pow(10, $digits); @return round($float * $pow) / $pow; )

Huomaa, että Sassin oletustarkkuus on 5 numeroa, eikä sitä voida mitenkään määrittää tänään. Tämän vuoksi Sass ei voi laskea numeroa, jossa on enemmän kuin 5 numeroa, riippumatta siitä, mikä funktiolle annettu nimi on $digits.

Tämä toiminto vaatii myös powtoiminnon, joka ei ole natiivi Sassin kanssa (vielä). Se on olemassa Compassissa, mutta jos et käytä Compassia tai muuta sen tarjoavaa kirjastoa, saatat tarvita omaa powtoimintoasi. Onneksi se on melko helppo toteuttaa:

/// Power function /// @param (Number) $x /// @param (Number) $n /// @return (Number) @function pow($x, $n) ( $ret: 1; @if $n >= 0 ( @for $i from 1 through $n ( $ret: $ret * $x; ) ) @else ( @for $i from $n to 0 ( $ret: $ret / $x; ) ) @return $ret; )