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函数

我们知道使用CSS4变量的优点，但是如果需要从SASS函数中获取这些值，该怎么办呢？：：root {--gap-l：toRem（10）; } toRem是我调用的Sass函数，以获取...

Answer 1

尝试此--gap-l: #{toRem(10)};，#{}语法称为interpolation。以自己解决错误的经验，当您想将SASS表达式的原始值与普通CSS一起使用时，如果您无法像toRem(10)那样使用简洁的语法，请尝试添加插值以查看其是否有效。另一个例子：

Answer 2

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