Nustatykite skaičių iki N skaitmenų CSS-gudrybės

Anonim

Kai kalbama apie „JavaScript“ ar bet kurią kitą programavimo kalbą, yra būdas sutrumpinti skaičių po nskaitmenų. Deja, „Sass“ tokios funkcijos nėra. Vis dėlto apvalinimo ir tikslumo problemos pasitaiko, kai, pavyzdžiui, sprendžiamos procentais pagrįstos tinklelio sistemos.

Čia yra „Sass“ diegimas 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; )

Atkreipkite dėmesį, kad „Sass“ numatytasis tikslumas yra 5 skaitmenys, ir šiandien jo negalima sukonfigūruoti. Dėl šios priežasties „Sass“ neįmanoma apskaičiuoti skaičiaus, turinčio daugiau nei 5 skaitmenis, nesvarbu, koks skaičius suteiktas funkcijai kaip $digits.

Taip pat šiai funkcijai reikalinga powfunkcija, kuri dar nėra „Sass“ gimtoji. Jis egzistuoja „Compass“, bet jei nenaudojate „Compass“ ar kitos jį teikiančios bibliotekos, jums gali prireikti savo powfunkcijos. Laimei, tai gana lengva įgyvendinti:

/// 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; )