如何实现CSS变量的值交换？类似ES6的[a,b]=[b,a]语法

这是个很常见的痛点！你遇到的问题确实是CSS变量实时绑定机制导致的——当你尝试直接写：

--primary-color: var(--secondary-color);
--secondary-color: var(--primary-color);

第二行的var(--primary-color)已经是刚刚被更新后的新值（也就是原来的--secondary-color），最终两个变量会变成同一个值，完全达不到交换的效果。这是当前CSS规范的既定行为，CSS变量的var()引用是动态计算的，没有像JS那样的“临时存储”步骤。

不过我们有可行的解决方法，最直接的就是用临时变量中转，类比JS里用临时变量交换值的思路：

div {
  /* 先保存父级作用域里原始的--primary-color值 */
  --temp-color: var(--primary-color);
  /* 把--primary-color替换成父级的--secondary-color */
  --primary-color: var(--secondary-color);
  /* 把--secondary-color替换成之前保存的原始--primary-color */
  --secondary-color: var(--temp-color);
  
  background-color: var(--primary-color);
}

这样就能完美实现两个变量的值交换，所有子元素继承这两个变量时，也会使用交换后的结果。

如果你的场景比较简单（比如只需要覆盖当前元素和直接子元素的样式），也可以跳过变量交换，直接在子元素里引用父级的对应变量：

div {
  background-color: var(--secondary-color);
}
div button {
  background-color: var(--primary-color);
}

但这种方法灵活性差，要是有很多子元素依赖这两个变量，还是临时变量的方案更高效。

总的来说，目前CSS没有像ES6[a,b] = [b,a]那样的解构交换语法，必须借助临时变量来绕开实时绑定的限制，这是CSS变量的特性决定的。

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