Bevestig een nummer aan N cijfers - CSS-trucs

Anonim

Als je te maken hebt met getallen in JavaScript of een andere programmeertaal, is er een manier om een ​​getal na ncijfers af te kappen. Helaas is er niet zo'n functie in Sass. Toch doen zich afrondings- en precisieproblemen voor bij bijvoorbeeld op percentages gebaseerde roostersystemen.

Hier is een Sass-implementatie van 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; )

Merk op dat Sass een standaardnauwkeurigheid van 5 cijfers heeft en dat er vanaf vandaag geen manier is om dit te configureren. Hierdoor is het voor Sass niet mogelijk om een ​​getal met meer dan 5 cijfers te berekenen, ongeacht het getal dat aan de functie is gegeven $digits.

Deze functie vereist ook een powfunctie die (nog) niet native is met Sass. Het bestaat in Compass, maar als je Compass of een andere bibliotheek die het aanbiedt niet gebruikt, heb je misschien je eigen powfunctie nodig. Gelukkig is het vrij eenvoudig te implementeren:

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