- Instant help with your CSS coding problems

Calculate percentage with SASS

Question:
How to calculate percentage with SASS?
Answer:
@use "sass:math";

$width-m: math.percentage(math.div(5,12));
Description:

Although utility-based CSS libraries such as TailwindCSS are very popular nowadays, sass is used in many projects.

If you want to calculate percentages in your scss file, you could use the percentage function with a plain divide sign, like this:

$width-m: percentage(5/12);

However, this is no longer a good idea because the above division operator is now deprecated. It currently still works in the 1.x dart-sass versions but will be removed starting with the 2.x versions. If you look at the scss - css conversion logs, you will probably notice the following warning message:

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(5, 12)
More info and automated migrator: https://sass-lang.com/d/slash-div

The modern solution is to use the math module. For division use the math.div function and for percentages use the math.percentage function. 
So the correct solution is: 

@use "sass:math";

.big-box {
    width: math.percentage(math.div(5,12));
    background-color: green;
}
Share "How to calculate percentage with SASS?"
Tags:
sass, scss, percentag, calculation, deprecated, sass 2.0
Technical term:
Calculate percentage with SASS
Interesting things
OpanAi's ChatGPT