32

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;
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

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

Recommendation: math.div($pixels, $context) or calc($pixels / $context)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
11 │     @return #{$pixels/$context}em;
   │               ^^^^^^^^^^^^^^^^
   ╵

2 Answers2

53

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;
}
Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
  • 1
    Migration Documentation: https://sass-lang.com/documentation/breaking-changes/slash-div Automatic Migration You can use the Sass migrator to automatically update your stylesheets to use math.div() and list.slash(). $ npm install -g sass-migrator $ sass-migrator division **/*.scss – Ignasi Sep 29 '22 at 10:03
2

To avoid using sass:math, you may just use

calc(scut-strip-unit($pixels) / $base)
Ulfius
  • 619
  • 7
  • 14
  • you should **not** avoid it, as the generated CSS will needlessly get inflated using redundant `calc` functions (also not performant) – vsync Jul 03 '23 at 10:41