使用scss函数的结果来初始化css自定义属性

Question

大家！

我已经有了这个文件结构

_utils.scss
_variables.scss
styles.scss

在 styles.scss 中，我导入每个部分：

@use "utils" as *;
@use "variables";
body {
  min-height: 100vh;
  background-color: var(--cl-primary);
  font-size: var(--fs-normal);
}

_utils.scss的内容是这样的：

@use "sass:math";
/// Converts PX to REM
/// @access public
/// @param {string} $size - Value to be converted in PX.
/// @returns {string} - Returns REM string.
/// @example font-size: rem(24px);
/// @returns font-size: 1.5rem;
@function toRem($size) {
  $remSize: math.div($size, 16px);
  @return #{$remSize}rem;
}

而_variables.scss的内容是这样的：

:root {
  --cl-primary: #3829e0;
  --cl-primary-tint: #e0e8ff;

  --fs-normal: toRem(32px);
}

问题：

为什么在网页上 css 自定义属性 --fs-normal 的计算结果为“toRem(32px)”而不是 2rem？

第二个问题：我应该怎么做才能将 --fs-normal 评估为 2rem？

谢谢大家！

Answer 1

来自文档：

为了提供与纯 CSS 的最大兼容性，最新版本的 Sass 要求在插值内编写自定义属性值中的 SassScript 表达式。插值也适用于较旧的 Sass 版本，因此建议所有样式表使用插值。

因此，如果没有插值，CSS 自定义属性中的函数调用将被 SCSS 视为字符串文字并且不会执行。为了使其工作，您需要使用

#{}

:

添加插值

--fs-normal: #{toRem(32px)};