如何在SCSS中通过change-contrast类实现颜色变量的条件切换

嘿，我明白你想实现点击按钮切换对比度时自动替换SCSS颜色变量的需求啦！不过这里得先理清一个关键点：SCSS是预编译工具，它在代码运行前就已经把样式编译成CSS了，没法直接在运行时检测body上的change-contrast类。所以我们得换个思路，结合CSS的特性来实现这个效果，下面给你两种可行的方案，推荐第一种哦～

方案一：CSS变量 + SCSS主题管理（推荐） #

这种方式利用CSS变量的运行时可变性，搭配SCSS来统一管理不同对比度的颜色集合，既简洁又易于维护：

// 先定义两种状态的颜色主题集合
$color-themes: (
  default: (
    primary-blue: #2aace2,
    mid-blue: #2695d2,
    dark-blue: #124b62
  ),
  high-contrast: (
    primary-blue: #177eab,
    mid-blue: #1c6f9b,
    dark-blue: #124b62
  )
);

// 给body设置默认主题的CSS变量
body {
  @each $key, $value in map-get($color-themes, default) {
    --#{$key}: #{$value};
  }
}

// 当body添加change-contrast类时，切换为高对比度主题的CSS变量
body.change-contrast {
  @each $key, $value in map-get($color-themes, high-contrast) {
    --#{$key}: #{$value};
  }
}

// 业务样式中直接使用CSS变量，切换类时自动更新颜色
.button {
  background-color: var(--primary-blue);
  border-color: var(--mid-blue);
  color: var(--dark-blue);
}

.header {
  background-color: var(--mid-blue);
}

配套JS逻辑 #

最后给按钮添加点击事件，切换body的类即可：

document.querySelector('.toggle-contrast-btn').addEventListener('click', () => {
  document.body.classList.toggle('change-contrast');
});

方案二：纯SCSS混合宏方式 #

如果不想用CSS变量，也可以用SCSS的混合宏来复用样式，但这种方式会生成重复的CSS代码，适合简单场景：

// 默认状态颜色变量
$primary-color-blue: #2aace2;
$mid-blue-color: #2695d2;
$dark-blue-color: #124b62;

// 定义混合宏封装需要切换颜色的样式
@mixin contrast-styles {
  .button {
    background-color: $primary-color-blue;
    border-color: $mid-blue-color;
    color: $dark-blue-color;
  }

  .header {
    background-color: $mid-blue-color;
  }
}

// 应用默认状态样式
@include contrast-styles;

// 高对比度状态：重新定义变量后复用混合宏
body.change-contrast {
  $primary-color-blue: #177eab;
  $mid-blue-color: #1c6f9b;
  $dark-blue-color: #124b62;
  
  @include contrast-styles;
}

为什么你的原尝试有问题？ #

你想写的if(change-contrast)是运行时的逻辑，但SCSS的条件判断只能在编译阶段生效，没法识别运行时DOM上的类名变化。所以必须通过CSS的类选择器优先级或者CSS变量的动态特性来实现切换。

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