在变量不起作用的情况下使用sass lighten函数

Question

我在

项目中使用SASS

如果我的变量编码

:root, [data-theme="default"] {
    --text-color: #383143;
}
$text-color: var(--text-color);

我正在使用具有变亮功能的变量，例如波纹管，

body {
    color: lighten($text-color, 10%);
}

我遇到以下错误，

  

错误：$color的参数lighten($color, $amount)必须是颜色              在asset / scss / base / typography.scss的第10行上，在函数lighten

中

如何将lighten函数与该变量一起使用？我需要使用-text-color：＃383143; 这种格式用于颜色切换器。

Answer 1

您不能在CSS变量中使用SASS变量，因为CSS变量是在CSS运行之前编译的。为了解决这个问题，您可以移动要由SASS定义的CSS变量，像这样

$text-color: #383143;
:root, [data-theme="default"] {
  --text-color: #{$text-color};
}