css - CSS 变量和 SASS 函数

Question

我们知道使用 CSS4 变量的优点，但是如果我们需要像这样从 SASS 函数中获取这些值怎么办？

:root {
    --gap-l: toRem(10);
}

toRem是一个 Sass 函数，我调用它来动态获取大小：

$fontSize: 16;
@function toRem($val) {
    @return $val / $fontSize * 1.6 + 0rem;
}

这不会失败，但也不会工作。为了让这个工作，我们可以直接使用值--gap-l或继续使用 SASS 变量。

如果我尝试这样的事情--gap-l: #{toRem(10)};是我得到的错误：

它不调用 SASS 函数

标签： csssass

Answer 1

您绝对可以这样做：您所缺少的只是使用字符串插值，即：

:root {
  --gap-l: #{toRem(10)};
}

原因在他们关于CSS 变量的“重大更改”文档中突出显示：

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