Rounding Numbers in SASS and Adjusting the Amount of Decimals

Rounding numbers in Sass and adjusting the amount of decimals

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.

Decimal places breaking @while in Sass

It seems you need to round the number in the class name: if you print /* #{$i*100} */ the compiler will compute both 30.0, 90.0 and 100.0

So you may use round() function (reference) to get rid of any decimals

$i : 0;
@while $i <= 1 {

   /* #{$i*100} */
  .opacity-#{round($i*100)} {
    opacity: $i !important;
  }

  $i : $i + 0.1;
}

The resulting output (tested on sassmeister) is

/* 0 */
.opacity-0 { opacity: 0 !important; }

/* 10 */
.opacity-10 { opacity: 0.1 !important; }

/* 20 */
.opacity-20 { opacity: 0.2 !important; }

/* 30.0 */
.opacity-30 { opacity: 0.3 !important; }

/* 40 */
.opacity-40 { opacity: 0.4 !important; }

/* 50 */
.opacity-50 { opacity: 0.5 !important; }

/* 60 */
.opacity-60 { opacity: 0.6 !important; }

/* 70 */
.opacity-70 { opacity: 0.7 !important; }

/* 80 */
.opacity-80 { opacity: 0.8 !important; }

/* 90.0 */
.opacity-90 { opacity: 0.9 !important; }

/* 100.0 */
.opacity-100 { opacity: 1.0 !important; }

Can CSS variables be rounded with no SASS?

CSS doesn't provide any mathematical functions for rounding a numeric value, whether that value is a custom property value or some other value. calc() does not offer that functionality either.

---

Related Topics