为什么我不能使用 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 函数，这也可以工作：

: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 个文件，我使用 Webpack 5.10.3 和 css-loader 和 sass-loader

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

为什么我不能使用 sass 变量来定义 css 变量的值

Why I can not use sass variables to define value of css variable

css

sass

css-variables

dart-sass