时间戳

首页 > 解决方案 > 无法将 CSS 自定义属性（又名 CSS 变量）与 SASS @if 语句一起使用

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

问题描述

我正在尝试将一些 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 文件。

标签： csssasscss-variablesscss-mixins

解决方案

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

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

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

推荐阅读