Dart sassへの乗り換えで、mixin.scssが利用できなくなった。

Question

以下、mixin.scss

@mixin aspect-ratio($width, $height) {
  display: block;
  width: 100%;
  height: auto;
  padding-top: ($height / $width) * 100%;
}

header.scss内で上記mixinを呼び出そうとすると、コンパイルの段階でエラーが起きます。
どなたか、アドバイスを頂けませんでしょうか？？
尚、以前に使っていたnode-sass（LibSass）によるimport利用の時はエラーは起きませんでした。

@use "../foundation/mixin" as m;
/*--------------------------------------------
 header
---------------------------------------------*/

  
  p {
    @include m.aspect-ratio(1200px, 400px);
    font-size: 1.6rem;

  }

以下、エラーの内容

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

Recommendation: math.div($height, $width)

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

╷

152 │ padding-top: ($height / $width) * 100%;
│ ^^^^^^^^^^^^^^^^
╵
assets/src/scss/foundation/_mixin.scss 152:17 aspect-ratio()
assets/src/scss/page/_header.scss 28:5 @use
assets/src/scss/style.scss 21:1 root stylesheet

Answer 1

DEPRECATION WARNINGとあるとおり、これはエラーではありません。

CSSの文法に/があってそれとの識別が困難なため、SCSSレベルでの演算子の/を次のバージョンで廃止する、というだけであり、まだ余裕はあります。

（書き換えられる箇所なら、メッセージの通りmath.div($height, $width)に置き換えておきましょう）

Comments

[maisumakun]

https://sass-lang.com/d/slash-div

[maisumakun]

（ファイル出力がなされていないのであれば、原因は別にあるかと思います）

[AkihiroH]

ありがとうございます。
勉強になりました。