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

Question

[Yeldos Sabyrbayev]

Привет всем! При выполнении команды margin: 0 54 / $maxWidthContainer * 100vw 0 0; компилятор выдает ошибку:

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

Вписал код как компилятор мне порекомендовал, теперь следующая ошибка:

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

Ну добавил я фигурные скобки: math.div(54, $maxWidthContainer){};, теперь ругается на какой то 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

Так в чем дело то? И какой будет готовый код по стандарту Dart Sass 2.0.0?

Answer 1

[Flying]

Поскольку вы используете выражение в значении CSS свойства - необходимо добавить интерполяцию значения:

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

Comments

[Yeldos Sabyrbayev]

Вот мой код:

.info-header {
  display: flex;
  justify-content: center;
  align-items: center;
  // .info-header__column
  &__column {
    padding: 0 54px 0 0;
    @media (max-width: $maxWidthContainer+px) {
      //padding: 0 30 / $maxWidthContainer * 100vw 0 0;
			@use 'sass:math';
			padding: 0 #{math.div(30, $maxWidthContainer  * 100vw)} 0 0;
    }
    &:last-child {
      padding: 0;
    }
  }

На это компилятор мне отвечает:

Error in plugin "sass"
Message:
    #src/scss/header.scss
Error: This at-rule is not allowed here.
    ╷
306 │             @use 'sass:math';
    │             ^^^^^^^^^^^^^^^^
    ╵
  #src/scss/header.scss 306:4  @import
  #src/scss/style.scss 76:9    root stylesheet

[Flying]

Yeldos Sabyrbayev, @use должен быть на верхнем уровне, его нельзя вызывать внутри селектора.

[Yeldos Sabyrbayev]

Flying, на сколько верхнем? на самом вверху программы?

[Flying]

Yeldos Sabyrbayev, "Верхний уровень" определяется не местом в файле, а контекстом.

Нельзя использовать @use внутри чего-то, к примеру внутри селектора, как в вашем коде. Но при этом он не обязан находиться в самом верху файла (хоть это и логичнее с точки зрения организации кода), а может быть где-то в середине.