Perbaiki Angka menjadi N Digit - Trik CSS

Anonim

Saat berurusan dengan angka dalam JavaScript atau bahasa pemrograman lainnya, ada cara untuk memotong angka demi nangka. Sayangnya, tidak ada fungsi seperti itu di Sass. Namun, masalah pembulatan dan presisi memang terjadi ketika berurusan dengan sistem grid berbasis persentase misalnya.

Berikut adalah implementasi Sass dari 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; )

Perhatikan bahwa Sass memiliki presisi default 5 digit, dan tidak ada cara untuk mengkonfigurasinya hingga hari ini. Karena itu, Sass tidak mungkin menghitung bilangan dengan lebih dari 5 digit, tidak peduli bilangan yang diberikan untuk fungsi sebagai $digits.

Selain itu, fungsi ini membutuhkan powfungsi yang tidak berasal dari Sass (belum). Itu ada di Kompas, tetapi jika Anda tidak menggunakan Kompas atau perpustakaan lain yang menyediakannya, Anda mungkin memerlukan powfungsi Anda sendiri . Untungnya, ini cukup mudah diterapkan:

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