css - sass 変数を使用して css 変数の値を定義できない理由

Question

sass 変数と sass 数学演算子を使用して、さまざまな cssfont-size変数を定義しようとしています。

css 変数を次のように定義しました。

$base-font-size: 1rem;

:root {
  --font-size-s: #{$base-font-size} * 0.5;
  --font-size-m: #{$base-font-size};
  --font-size-l: #{$base-font-size} * 2;
}

次に、他のファイルで css 変数を次のように使用しました。

p {
  font-size: var(--font-size-l);
}

これはまったく機能しません。私のフォントサイズはまったく変わりません。私はsassの数学演算子に何か問題があるのではないかと思ったので、そのようなことを試しました:

p {
  font-size: 1rem * 2;
}

これは機能し、私のフォントサイズは2rem期待どおりに等しくなりました。この発見の後、sass変数で何か間違ったことをしているのかもしれないと思ったので、css変数をそれに変更しました:

:root {
  --font-size-s: 1rem * 0.5;
  --font-size-m: 1rem;
  --font-size-l: 1rem * 2;
}

そして、これはうまくいきません！私は自分が間違っていることを本当に知りません。これらの css 変数を sass 変数と sass 数学演算子で定義する方法を誰かに説明してもらえますか?

ノート：

• csscalc関数を使用すると、これも機能します。

:root {
  --font-size-s: calc(#{$base-font-size} * 0.5);
  --font-size-m: #{$base-font-size};
  --font-size-l: calc(#{$base-font-size} * 2);
}

• .scssファイルをコンパイルするために、css-loaderとsass-loaderでWebpack 5.10.3を使用しています