SASS @if判断背景色匹配CSS变量失效，else条件不生效求助

首先要明确：你的Sass代码逻辑出错的核心原因是Sass作为预处理器，无法在编译阶段获取浏览器运行时的CSS变量值或元素实际样式。你写的@if (background: var(--bg-danger))这个条件，在Sass编译时会被判定为“真值”（因为它是一个非空的CSS属性声明表达式），所以@if分支永远生效，导致文字一直是白色。

下面提供两种可行的解决方案，根据你的实际使用场景选择：

方案1：给Mixin传递背景色参数（预编译时确定逻辑） #

如果在使用Mixin的时候，你已经知道当前元素的背景色是什么，可以通过传递参数的方式让Sass在编译时判断：

@mixin text-color($bg-type) {
  @if $bg-type == danger {
    color: var(--text-white);
  } @else {
    color: var(--text-dark);
  }
}

// 使用示例
.danger-card {
  background: var(--bg-danger);
  @include text-color(danger); // 传递参数指定背景类型
}

.normal-card {
  background: var(--bg-normal);
  @include text-color(normal);
}

或者直接传递变量值进行判断：

@mixin text-color($bg-value) {
  @if $bg-value == var(--bg-danger) {
    color: var(--text-white);
  } @else {
    color: var(--text-dark);
  }
}

.danger-button {
  background: var(--bg-danger);
  @include text-color(var(--bg-danger));
}

方案2：用CSS原生逻辑实现（运行时适配） #

如果需要根据元素实际应用的背景色动态调整文字颜色（比如背景色是通过JS或用户交互动态变化的），应该用CSS的原生特性，因为Sass无法处理运行时的样式变化：

方式A：通过CSS变量联动定义 #

提前在:root中定义好背景色对应的文字色变量，直接关联使用：

:root {
  --bg-danger: #dc3545;
  --bg-default: #f8f9fa;
  
  --text-white: #fff;
  --text-dark: #212529;
  
  // 建立背景与文字色的关联变量
  --text-for-danger: var(--text-white);
  --text-for-default: var(--text-dark);
}

.danger-element {
  background: var(--bg-danger);
  color: var(--text-for-danger);
}

.default-element {
  background: var(--bg-default);
  color: var(--text-for-default);
}

方式B：使用属性选择器（适配内联样式场景） #

如果元素的背景色是通过内联style属性设置的，可以用属性选择器匹配：

/* 匹配所有内联样式包含--bg-danger的元素 */
[style*="--bg-danger"] {
  color: var(--text-white);
}

/* 其他情况默认文字色 */
:not([style*="--bg-danger"]) {
  color: var(--text-dark);
}

方式C：使用:has伪类（需注意浏览器兼容性） #

如果你的目标浏览器支持:has伪类（Chrome 101+、Firefox 121+），可以直接匹配背景色符合条件的元素：

.element:has(background-color: var(--bg-danger)) {
  color: var(--text-white);
}

.element:not(:has(background-color: var(--bg-danger))) {
  color: var(--text-dark);
}

内容的提问来源于stack exchange，提问作者kurakura