无法将 CSS 自定义属性（又名 CSS 变量）与 SASS @if 语句一起使用答案

【问题标题】：Unable to use CSS Custom Properties (aka CSS Variables) with SASS @if Statement无法将 CSS 自定义属性（又名 CSS 变量）与 SASS @if 语句一起使用
【发布时间】：2021-03-02 05:10:54
【问题描述】：

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

混合示例：

@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：

:root {
    --hue: 195;
    --status: 'default';
}

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

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

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

知道可能是什么问题吗？

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

【问题讨论】：

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

标签： css sass css-variables scss-mixins

【解决方案1】：

如果你有一些文件，你在其中导入所有 SCSS 文件，这取决于先导入哪些文件，然后再导入哪些文件。

确保你需要被 VS 读取的那个是第一个。

例如，我需要先读取我的变量，所以它必须是第一个，否则，我的代码读取 mixin，但还不知道什么是 '$blue'。

【讨论】：