2

I have the following Sass rule:

$multiplier: 1/3*100;
.ratio_1x0-5{
    padding-bottom: 0.5%*$multiplier;
}

Which outputs the following css:

.ratio_1x0-5{
    padding-bottom: 16.6666666667%
}

Instead - I need this rule to be the following (the decimal precision isn't important - only that the last value is a 6 - not a 7), this is to resolve a subpixel rendering issue.

.ratio_1x0-5{
    padding-bottom: 16.6666%
}

If I use the sass 'floor' function - it rounds down the whole thing to '16%'. Is there any way to round down to x number of decimal places in Sass? How about using a mixin to do this? I'm using libsass (sass 3.2).

Adjusting the 'precision' doesn't work - the last value is still '7'. Changing precision alone only truncates the number of decimal places - it doesn't round the last decimal place down like I need it to.

Codepen: http://codepen.io/calumbrodie/pen/aOzVga

Edit: Whoever marked this as a duplicate - this is a different question, the other question is about 'precision', while I explicitly explain why this isn't about 'precision'. I can't really make it any clearer.

calumbrodie
  • 4,722
  • 5
  • 35
  • 63
  • 1
    possible duplicate of [Rounding in Sass](http://stackoverflow.com/questions/10369643/rounding-in-sass) – cimmanon Apr 27 '15 at 19:25
  • @cimmanon - It's not a duplicate - please remove your flag. The other questions accepted answer is about 'precision' and I explained in my original question that this isn't about just precision, it' about performing a 'floor' operation on a decimal place. – calumbrodie Apr 27 '15 at 21:04
  • I am not obligated to remove anything. Just because the accepted answer doesn't do what you want doesn't make your question not a duplicate. The other answer *does* answer your question (and is simpler). – cimmanon Apr 27 '15 at 22:20
  • No - the answer to that other question (changing the precision) would result in the value being 16.6667, which would be wrong. It's obvious you don't understand the difference between the precision, and rounding strategy. And I didn't demand you do anything, I asked you to remove the flag politely. Please read my question again - you're missing the point. – calumbrodie Apr 27 '15 at 22:37

2 Answers2

1

Found the answer just after posting thanks to the following Gist:

https://gist.github.com/terkel/4373420

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

Then use it as follows:

.ratio_1x0-5{
    padding-bottom: decimal-round(0.5%*$multiplier, 5, floor);
}
calumbrodie
  • 4,722
  • 5
  • 35
  • 63
-1

use $sass-precision: x; it would tell sass explicitly what to round to in terms of decimal places.

ZackAttack
  • 126
  • 12