如何在不重写代码的情况下为SCSS变量应用动画？

我已经在全部代码中使用了SCSS变量，示例代码如下：

$primary: royalblue;
body { 
  background: $primary; 
  color: black; 
} 
.list-item { 
  // some code 
  span, a { 
    background: black; 
    color: $primary; 
  } 
}

现在我想为body的背景色创建动画，尝试了以下代码，但没有效果：

@keyframes bganimation { 
  from { $primary: royalblue; } 
  to { $primary: tomato; } 
}

我知道SCSS是编译为CSS的语言，这种写法肯定不行，但我无法重写现有代码，恳请大家提供可行的实现方法。

你说得对，SCSS变量是编译时替换的——当你的SCSS被编译成CSS时，所有$primary都会直接替换成它的初始值（这里是royalblue），所以你在@keyframes里修改$primary完全没用，编译后这段动画代码会变成无效的CSS，根本起不到动画的作用。

不过不用慌，我们可以用**CSS自定义属性（也就是CSS变量）**作为桥梁，在不大规模重写现有SCSS代码的前提下实现需求，下面给你两种方案，根据你的需求选择：

方案1：仅让body背景色动，其他地方保持原SCSS变量值 #

这种方案改动最小，只需要修改body的背景色属性，再添加CSS变量和动画即可：

$primary: royalblue;

// 定义一个CSS变量，用SCSS变量初始化它
:root {
  --body-bg: #{$primary};
}

body { 
  // 把原来的$primary换成CSS变量
  background: var(--body-bg); 
  color: black; 
  // 绑定动画
  animation: bganimation 2s infinite alternate;
} 
.list-item { 
  // some code 
  span, a { 
    background: black; 
    // 这里依然用原来的SCSS变量，保持颜色不变
    color: $primary; 
  } 
}

// 动画中修改CSS变量（CSS变量是运行时生效的，支持动画）
@keyframes bganimation { 
  from { --body-bg: royalblue; } 
  to { --body-bg: tomato; } 
}

方案2：让所有使用$primary的地方都跟着动画变化 #

如果你希望不仅是body背景，其他用到$primary的元素（比如.list-item里的span和a）也跟着变色，那可以把SCSS变量直接映射到CSS变量，这样所有引用$primary的地方都会自动关联到可动画的CSS变量：

// 把SCSS变量指向CSS变量
$primary: var(--primary);

// 用原初始值初始化CSS变量
:root {
  --primary: royalblue;
}

body { 
  // 这里依然用$primary，编译后会变成var(--primary)
  background: $primary; 
  color: black; 
  animation: bganimation 2s infinite alternate;
} 
.list-item { 
  // some code 
  span, a { 
    background: black; 
    // 这里的$primary也会变成var(--primary)，跟着动画变色
    color: $primary; 
  } 
}

@keyframes bganimation { 
  from { --primary: royalblue; } 
  to { --primary: tomato; } 
}

这两种方案都不需要大规模重写你的现有代码，只是做了微小的调整，就能实现你要的背景色动画效果。

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