為什么我不能使用 sass 變量來定義 css 變量的值

Question

我正在嘗試使用 sass 變量和 sass 數學運算符來定義不同的 css font-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;
}

這是行不通的。 我真的不知道我做錯了什么？ 有人可以向我解釋我應該如何用 sass 變量和 sass 數學運算符定義這些 css 變量嗎？

筆記：

• 如果我使用 css calc function 這也可以：

: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

Answer 1

您需要評估所有表達式，如下所示：

$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};
}