Sass and rounding numbers. Can this be customized?

Question

Is there a way to change the way Sass will handle decimals? I noticed that some people say that Sass will dynamically perform the calculation (target / parent) * 100 needed for flexible layouts and output the result at compile time. It even has a percentage function that will essentially take two values ​​and do it.

Alas, Sass will only give me 3 decimal places. My understanding so far has been that in some cases this may not be a sufficient degree of accuracy for all browsers to correctly display the layout without any hiccups.

Can someone help me figure this out?

EDIT

solved. If anyone else is interested, I managed to accomplish what I wanted in Sass number.rb by changing the @precision value. This changes the way all floats are output.

Answer 1

If you use Compass, you can easily specify the accuracy in the project file (config.rb) without breaking the kernel:

Sass::Script::Number.precision = 8 

For more information see the Sass Documentation

Answer 2

It can also be configured using --precision on the command line, see SASS Changelog, version 3.1.8 .

It should also be added that if you want to directly edit @precision in numbers.rb , you can find numbers.rb (at least on OS X), here:

 /usr/lib/ruby/user-gems/1.8/gems/sass-3.1.10/lib/sass/script 

1.8 and 3.1.10, of course, should be replaced by your (preferably the most recent) version numbers.

Answer 3

First set your default accuracy with the maximum accuracy that you will need in your project.

Then use a function similar to the one below (which is based on this Takeru Suzuki function ) to adjust the number of decimal places to the level of individual properties.

The code:

 @function decimal-round ($number, $digits: 0, $mode: round) { $n: 1; // $number must be a number @if type-of($number) != number { @warn '#{ $number } is not a number.'; @return $number; } // $digits must be a unitless number @if type-of($digits) != number { @warn '#{ $digits } is not a number.'; @return $number; } @else if not unitless($digits) { @warn '#{ $digits } has a unit.'; @return $number; } @if $digits > 0 { @for $i from 1 through $digits { $n: $n * 10; } } @if $mode == round { @return round($number * $n) / $n; } @else if $mode == ceil { @return ceil($number * $n) / $n; } @else if $mode == floor { @return floor($number * $n) / $n; } @else { @warn '#{ $mode } is undefined keyword.'; @return $number; } } 

Exit:

 decimal-round(0.333) => 0 decimal-round(0.333, 1) => 0.3 decimal-round(0.333, 2) => 0.33 decimal-round(0.666) => 1 decimal-round(0.666, 1) => 0.7 decimal-round(0.666, 2) => 0.67