Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0

user_16438624 0
Viewed 21363

In these functions I compile rem to px and em to px:

$base: 16 !default;

@function scut-strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function rem($pixels) {
  @return scut-strip-unit($pixels) / $base * 1rem;
}

@function em($pixels, $context: $base) {
  @return #{$pixels / $context}em;
}

But with Sass v1.49, we are facing this error:

Error
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.    

Recommendation: math.div(scut-strip-unit($pixels), $base) or calc(scut-strip-unit($pixels) / $base)    

More info and automated migrator: https://sass-lang.com/d/slash-div 
   
  ╷
8 │ @return scut-strip-unit($pixels) / $base * 1rem;
sass css html
2 Answers

Using / to make divisions outside of calc function won't be supported anymore. Here is an overview of the reason why form the documentation:

Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.

You should either use math.div from sass:math, as an example like so:

@use "sass:math";

body {
  font-size: math.div(50, 16) * 1px;
}

Or use / inside calc, as an example like so:

body {
  font-size: calc(50 / 16) * 1px;
}
user_152886410

To avoid using sass:math, you may just use

calc(scut-strip-unit($pixels) / $base)
user_7105330
Related