Bir Sayıyı N Basamağa Düzeltme - CSS Hileleri

Anonim

JavaScript veya başka bir programlama dilindeki sayılarla uğraşırken, rakamlardan sonra bir sayıyı kesmenin bir yolu vardır n. Ne yazık ki Sass'ta böyle bir işlev yok. Yine de, örneğin yüzde tabanlı grid sistemleriyle uğraşırken yuvarlama ve hassaslık sorunları meydana gelir.

İşte bir Sass uygulaması 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; )

Sass'ın varsayılan 5 basamaklı bir duyarlılığa sahip olduğunu ve bugünden itibaren bunu yapılandırmanın bir yolu olmadığını unutmayın. Bu nedenle, işleve olarak verilen sayı ne olursa olsun, Sass'ın 5'ten fazla basamaklı bir sayıyı hesaplaması mümkün değildir $digits.

Ayrıca, bu işlev powSass ile yerel olarak gelmeyen (henüz) bir işlev gerektirir . Compass'ta mevcuttur, ancak Compass'ı veya onu sağlayan başka bir kitaplığı kullanmıyorsanız, kendi powişlevinize ihtiyacınız olabilir . Neyse ki, uygulaması oldukça kolaydır:

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