使用变量不工作的 sass 减轻函数

Question

我在我的项目中使用 SASS

这里如果我的变量代码

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

我正在使用该变量与像波纹管一样的减轻功能，

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

我收到以下错误，

错误：参数$color的lighten($color, $amount)必须对资产/ SCSS /碱/ typography.scss的第10行的彩色，在功能lighten

如何在该变量中使用 lighten 函数？我需要使用--text-color: #383143; 用于颜色切换器目的的格式。

Answer 1

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

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