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

我试图使用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;
}

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

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

然后在另一个文件中，我使用了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;
}

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

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

这根本不起作用，我的字体大小根本没有改变。我认为sass数学运算符可能有问题，所以我尝试了类似的方法：

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

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

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

  函数，这也会起作用：

• 对于编译

  .scss

  文件，我使用Webpack5.10.3和css加载程序以及sass加载程序

---

您需要计算所有表达式，如下所示：

$base字体大小：1rem；
：根{
--font-size-s:#{$base font size*0.5}；
--font-size-m:#{$base font-size}；
--font-size-l:#{$base font size*2}；
}