对 SCSS 变量应用动画答案

【问题标题】：apply animation on SCSS variables对 SCSS 变量应用动画
【发布时间】：2020-08-24 22:14:51
【问题描述】：

我在所有代码中都使用了 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;
  }
}

但我知道 scss 是一种可以编译为 css 的语言……还有其他方法吗？我无法重写代码，请帮助。

【问题讨论】：

标签： css sass css-animations

【解决方案1】：

您必须为background-color 属性设置动画，所以它应该是：

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

【讨论】：

【解决方案2】：

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

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

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

--some-variable: red;

（请注意，这在 IE 等“浏览器”中无法开箱即用）

您应该在代码中修复更多内容： - 没有为任何元素设置动画（通过animation 属性） - 在关键帧块中，您必须定义应该动画的属性以及动画时它们应该采用的值

例如：

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

因此，您必须至少稍微重写代码才能使其正常工作。

【讨论】：