css - 将自定义 CSS 变量与 SASS 函数一起使用

Question

:root {
  --red: #f00;
}
div {
  width: 10rem;
  height: 10rem;
  background-color: darken( var( --red ),15% );
}

输出错误：

错误：$color: var(--red) 不是颜色。

当然，这对于常规的 SASS 变量非常有效。下面的代码按预期工作：

$red: #f00;

div {
  width: 10rem;
  height: 10rem;
  background-color: darken( $red,15% );
}

内置 CSS 变量是个人偏好，因为它们可以使用 javaScript 访问。

是否可以将 CSS 变量与 SASS 函数一起使用？任何已知的解决方案或解决方法都会有所帮助。甚至黑客。

SCSS 环境中 Codepen 的链接：https ://codepen.io/user-devsandbox/pen/vYmMzwb

标签： cssfunctionvariablessasscolors