Rounding numbers in Sass and adjusting the amount of decimals

Question

Is their a way in sass to change the digit that rounding occurs on, I would like to stop rounding of a number like this 2.0242914979757085% to this 2.024%. I would like to adjust the amount of decimals in the output css

Answer 1

A quick option without any extra functions would be to multiply the number by 1000, then round it, then divide by 1000.

round($percent * 1000) / 1000;

Answer 2

From the SASS change logs:

The numeric precision of numbers in Sass can now be set using the --precision option to the command line. Additionally, the default number of digits of precision in Sass output can now be changed by setting Sass::Script::Number.precision to an integer (defaults to 3). Since this value can now be changed, the PRECISION constant in Sass::Script::Number has been deprecated. In the unlikely event that you were using it in your code, you should now use Sass::Script::Number.precision_factor instead.

This was added in SASS 3.1.8.

Answer 3

You could use the following function, which is a slight improvement of the function created by Takeru Suzuki :

@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;
    }
}

Output :

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

Answer 4

You could also do the following:

@function ceilHundredths($numbers) {
    $numbers: $numbers * 10000;

    @if ($numbers < 1) {
        $numbers: $numbers - 1;

    } @else {
        $numbers: $numbers + 1;
    }

    @return round($numbers)/ 100#{"%"};

}

.test--regular {
    margin-left: percentage( -1 / 3 );
}

.test {
    margin-left: ceilHundredths( -1 / 3 );
}

.test--regular--2 {
    margin-left: percentage( 1 / 3 );
}

.test--2 {
    margin-left: ceilHundredths( 1 / 3 );
}

Answer 5

Strictly speaking this is not an answer to your question but if you just want to strip decimal places, you might as well just do this:

font-size: round(12.5); /* => 12 */

It may be appropriate with values that do not require a high level of precision, as for example with font sizes.

Answer 6

Here is my sass rounding function

@function round($value, $fractionDigits: 0) {
  $power: math.pow(10, $fractionDigits);
  @return math.div(math.round($power * $value), $power);
}

Usage:

round(2.0242914979757085%, 3) // 2.024%

Don't forget to add the sass:math module, like so:

@use "sass:math";

P.S. this is a sass port of following JS method I was using:

export const round = (value, fractionDigits = 0) => {
  const power = Math.pow(10, fractionDigits);
  return Math.round(power * value) / power;
};

Answer 7

we simply have to use floor(n*1000)/1000

you can create your own custom function to do that like

@function  fn-truncate($value, $places) {
  $radix: 10;
  $num: 1;
  $result : 0;

  @for $i from 1 through $places {
    $num: $num * $radix;
  }

  $result: math.div(math.floor($value * $num), $num);

  @return $result;
}

Inputs:

  @debug "fn-truncate(123.4999, 2) : #{fn-truncate(123.4999, 2)}";
  @debug "fn-truncate(123.4999, 1) : #{fn-truncate(123.4999, 1)}";
  @debug "fn-truncate(123.999, 2) : #{fn-truncate(123.999, 2)}";
  @debug "fn-truncate(123.6999, 1) : #{fn-truncate(123.6999, 1)}";
  @debug "fn-truncate(123.2, 3) : #{fn-truncate(123.2, 3)}";
  @debug "fn-truncate(123.123456, 2) : #{fn-truncate(123.123456, 2)}";
  @debug "fn-truncate(123, 2) : #{fn-truncate(123, 2)}";
  @debug "fn-truncate(123.45, 3) : #{fn-truncate(123.45, 3)}";

output

src/styles/_functions.scss:65 DEBUG: fn-truncate(123.4999, 2) : 123.49
src/styles/_functions.scss:66 DEBUG: fn-truncate(123.4999, 1) : 123.4
src/styles/_functions.scss:67 DEBUG: fn-truncate(123.999, 2) : 123.99
src/styles/_functions.scss:68 DEBUG: fn-truncate(123.6999, 1) : 123.6
src/styles/_functions.scss:69 DEBUG: fn-truncate(123.2, 3) : 123.2
src/styles/_functions.scss:70 DEBUG: fn-truncate(123.123456, 2) : 123.12
src/styles/_functions.scss:71 DEBUG: fn-truncate(123, 2) : 123
src/styles/_functions.scss:72 DEBUG: fn-truncate(123.45, 3) : 123.45

further you can add some more check/handle input units, etc in fn-truncate() as per your requirement like $places should not be 0 or how you want to handle that use case, both $value, $places should be a number using type-of($value) == 'number' & many more use cases you can think of.

Thanks