无法将CSS自定义属性（也称CSS变量）与SASS@if语句一起使用

我正在尝试将一些CSS自定义属性传递给SASS Mixin。当直接应用到我想要的样式中时，我可以使用变量。但是，当我尝试在If语句中使用变量时，它不起作用

Mixin示例：

@mixin bg-color($hue, $status) {
  background: hsl($hue, 50%, 50%); // $hue works as expected

  @if $status == 'danger' { // doesn't work!
    color: 'red';
  } @else if $status == 'warning' { // doesn't work!
    color: 'orange';
  } @else { // always enters the else branch
    color: 'black';
  }
}

CSS:

如果我手动将状态值添加到mixin，它将工作：

.demo {
    @include bg-color(var(---hue), 'danger');
}

你知道可能是什么问题吗

---

更新：如@temani afif所述，这种方法是不可能的，因为SASS文件是在使用CSS变量之前编译的。

如果您有某个文件，在其中导入所有SCSS文件，则取决于先导入哪个文件，然后导入哪个文件

确保VS首先读取您需要的内容

---

例如，我需要首先读取我的变量，所以它必须是第一个，换句话说，我的代码读取mixin，并且还不知道什么是“$blue”。

这是不可能的，SASS是一个预处理器，CSS变量在运行时稍后出现

.demo {
    @include bg-color(var(---hue), 'danger');
}