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

Question

我在我的元素中使用 SASS

这里是我的变量代码

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

我正在使用那个带有 lighten 函数的变量，如下所示，

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

我收到以下错误，

Error: argument $color of lighten($color, $amount) must be a color on line 10 of assets/scss/base/typography.scss, in function lighten

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

Answer 1

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

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