对SCSS变量应用动画

Question

我在所有代码中都使用了scss变量，如下所示：

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

现在，我想为身体背景颜色创建一个动画：

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

但我知道scs是一种编译成css的语言。。。还有别的办法吗？我不能重写代码，请帮忙。

Answer 1

我想您首先必须了解SCSS变量的实际工作方式：当将SCSS编译为CSS时，变量会被替换为变量的实际当前值，因此最终不会再有任何变量。

也就是说，你的关键帧块最终将只是一个空块。

如果你想要真正的变量，你必须使用实际的CSS变量

--some-variable: red;

(请注意，这在IE等"浏览器"中无法开箱即用(

您应该在代码中修复更多内容：-没有为任何元素设置动画(通过动画属性(-在关键帧块中，你必须定义哪个属性应该设置动画，以及它们在设置动画时应该取什么值

例如：

@keyframes bganimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}

因此，您必须至少重写一点代码才能使其工作。

Answer 2

您必须设置background-color属性的动画，因此它应该是：

@keyframes bganimation {
from {
background-color: $primary;
}
to {
background-color: tomato;
}
}