SASS混入问题：无对应HTML类时全局变量仍被覆盖求助

这个问题我之前也碰到过，核心原因是没搞清楚Sass预编译特性和DOM类的运行时判断之间的差异～

为什么你的代码会出问题？ #

Sass是预处理器，所有变量赋值、mixin调用都是在编译阶段完成的，完全不知道运行时HTML里有没有.second类。当你在代码里先后调用两个修改全局变量的mixin时，$image-name会被最后一次赋值覆盖——哪怕对应的选择器在实际页面中不会生效，编译阶段已经把变量值固定成'second-img'了，自然达不到你想要的动态切换效果。

更优的实现方式 #

根据你的需求，推荐两种更合理的方案：

方案1：直接在mixin中生成背景样式（最直观）

放弃全局变量，让mixin直接输出对应的background-image规则，利用CSS选择器的优先级来实现动态切换：

@mixin header-bg($image) {
  background-image: url($image);
}

// 头部基础样式
.header {
  padding: 2rem;
  height: 100px;

  // 对应.first类的背景
  &.first {
    @include header-bg('first-img.jpg');
  }

  // 对应.second类的背景
  &.second {
    @include header-bg('second-img.jpg');
  }
}

编译后会生成两个独立的CSS规则，浏览器会根据HTML中.header实际带的类来应用对应的背景，完全不会冲突。

方案2：使用CSS自定义属性（更灵活）

CSS变量（自定义属性）是运行时生效的，能完美适配DOM类的动态变化，代码也更简洁：

.header {
  // 定义默认背景变量
  --header-background: url('default-img.jpg');
  background-image: var(--header-background);

  // 不同类覆盖变量值
  &.first {
    --header-background: url('first-img.jpg');
  }

  &.second {
    --header-background: url('second-img.jpg');
  }
}

如果还是想用mixin封装变量赋值逻辑，可以改成这样：

@mixin set-header-bg($image) {
  --header-background: url(#{$image});
}

.header {
  background-image: var(--header-background);
  --header-background: url('default-img.jpg');

  &.first {
    @include set-header-bg('first-img.jpg');
  }

  &.second {
    @include set-header-bg('second-img.jpg');
  }
}

这两种方案都能完美解决你的问题，而且比用全局变量的方式更符合CSS和Sass的设计逻辑～

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