Sass中如何通过body类覆盖$Akzent变量而不重写代码？

嘿，这个问题我之前踩过坑！核心原因是Sass变量是编译时生效的——你在body.page-aktzent-2选择器里重新赋值$Akzent，其实只是在那个局部作用域里创建了一个新变量，根本不会影响全局已经编译好的、使用了原$Akzent的样式。

想要不用重写所有样式就能实现动态切换，最佳方案是结合**CSS自定义属性（也就是CSS变量）**来做，因为CSS变量是运行时生效的，可以通过选择器优先级覆盖。具体步骤如下：

1. 把Sass变量映射到全局CSS变量 #

首先在全局样式里，用:root选择器定义一个CSS变量，并用你的Sass全局变量初始化它：

// 全局Sass变量定义
$Akzent: #6d998e;

// 映射到CSS全局变量
:root {
  --akzent: #{$Akzent}; // 用Sass插值把变量值注入到CSS变量中
}

2. 替换所有使用$Akzent的地方为CSS变量 #

把原来所有直接用$Akzent的样式，改成使用var(--akzent)：

// 原来的写法
// a {
//   color: $Akzent;
// }
// .section .foo {
//   background-color: $Akzent;
// }

// 修改后的写法
a {
  color: var(--akzent);
}
.section .foo {
  background-color: var(--akzent);
}

3. 在特定页面的body类下覆盖CSS变量 #

最后，在你需要切换颜色的页面样式里，给body.page-aktzent-2重新定义CSS变量即可：

body.page-aktzent-2 {
  --akzent: #ff9900; // 直接写橙色值，或者如果有对应Sass变量也可以用#{$Akzent-2}插值
}

这样一来，所有使用var(--akzent)的样式，在带有.page-aktzent-2类的body下都会自动切换成橙色，完全不用重写每一处样式！

原理很简单：CSS变量会根据DOM的层级和选择器优先级动态生效，浏览器会自动为匹配到的元素应用最接近的变量值，完美解决了Sass编译时变量无法动态修改的问题。

内容的提问来源于stack exchange，提问作者STORMS-MEDIA