如何将 CSS 自定义属性传递给 sass 内置模块？

Question

我正在做一个 vue 项目。 在我的一个组件中，我使用了 sass 并尝试访问一个产生 hover 效果的mixin 。 这是我的组件的代码：

 <template> <div class="greetings"> <h1>{{ msg }}</h1> <button id="myButton" class="btn btn-secondary">hover me</button> </div> </template> <script setup> defineProps({ msg: { type: String, required: true } }) </script> <style scoped lang="scss"> @use "../assets/sass-folder/variables"; @use "../assets/sass-folder/mixins"; h1 { color: var(--info); }.greetings #myButton { @include mixins.hover-effect-1(var(--info)); } </style>

在该代码中，我可以访问在我的其他“scss”文件（如variables.scss ）中定义的var(--info)值。 同样在浏览器 devtools 中，它的值被正确计算为rgb(103, 14, 181) 。 在我的mixins.scss文件中，我有以下代码：

@use "sass:color";
@mixin hover-effect-1($color) {
    @debug $color;
    &:hover {
        color: $color;
        background-color: color.scale($color, $lightness: 50%);
    }
}

但我给出了这个错误：

$color: var(--info) is not a color
background-color: color.scale($color, $lightness: 50%);

这意味着color.scale() sass 内置模块无法识别我的 css 自定义变量。 为什么会发生这种情况以及如何解决？ 如果我将我的@include更改为这样的内容：

@include mixins.hover-effect-1(#4852FF);
/* or this one */
@include mixins.hover-effect-1(rgb(103, 14, 181));

它工作正常且没有错误。