DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.?

Question

Sass

Hi all! When executing the command , the margin: 0 54 / $maxWidthContainer * 100vw 0 0;compiler throws an error:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(54, $maxWidthContainer)

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

I entered the code as the compiler recommended to me, now the following error:

Error in plugin "sass"
Message:
    #src/scss/header.scss
Error: expected "{".
    ╷
132 │             math.div(54, $maxWidthContainer);
    │                                             ^
    ╵
  #src/scss/header.scss 132:36  @import
  #src/scss/style.scss 76:9     root stylesheet

Well, I added curly braces: math.div(54, $maxWidthContainer){};, now it swears at some kind of selector:

Error in plugin "sass"
Message:
    #src/scss/header.scss
Error: expected selector.
    ╷
132 │             math.div(54, $maxWidthContainer){};
    │                     ^
    ╵
  #src/scss/header.scss 132:12  @import
  #src/scss/style.scss 76:9     root stylesheet

So what's the matter then? And what will be the finished code according to the Dart Sass 2.0.0 standard?

Answer 1

Because you are using an expression in the value of a CSS property - you need to add value interpolation :

.example {
  margin: 0 #{math.div(54, $maxWidthContainer  * 100vw)} 0 0;
}