Calculate percentage with SASS
@use "sass:math";
$width-m: math.percentage(math.div(5,12));
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;
}