使用带有变量的 sass lighten 函数不起作用

Question

我在我的项目中使用 SASS

如果我的变量代码在这里

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

我正在使用具有以下减轻功能的变量，

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

我收到以下错误，

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

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

Answer 1

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

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