如何根据选择器设置SCSS变量？变量值异常问题求助

你的问题出在混淆了Sass变量和CSS变量的区别：Sass变量是编译阶段的变量，并非浏览器运行时生效的动态变量。你在.admin嵌套选择器里重新赋值$backgroundColor，会直接覆盖这个变量在当前作用域的最终值——编译完成后，该变量就固定为#e4daec，自然不管页面里有没有admin类，样式都会使用这个值。

不需要用两个不同的Sass变量也能解决问题，给你几种可行的写法：

写法1：直接指定背景色（最简单） #

body.workspace {
  background-color: #f1f4fa;
  &.admin {
    background-color: #e4daec;
  }
}

写法2：用真正的CSS变量（支持动态切换） #

如果需要复用颜色值，推荐用CSS自定义属性（常说的CSS变量），它是运行时生效的，可通过类嵌套覆盖：

body.workspace {
  --background-color: #f1f4fa;
  background-color: var(--background-color);
  
  &.admin {
    --background-color: #e4daec;
  }
}

写法3：用Sass变量管理颜色值（编译时复用） #

如果非要用Sass变量管理颜色，只需提前定义不同变量，再在对应选择器里调用：

$workspace-bg: #f1f4fa;
$admin-workspace-bg: #e4daec;

body.workspace {
  background-color: $workspace-bg;
  &.admin {
    background-color: $admin-workspace-bg;
  }
}

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