如何使用 SASS 动态生成 CSS3 关键帧步骤？

Posted 2023-03-05

【中文标题】如何使用 SASS 动态生成 CSS3 关键帧步骤？

【英文标题】：How to dynamically generate CSS3 keyframe steps using SASS?

【发布时间】：2013-12-27 15:01:32

【问题描述】：

假设我有一个关键帧动画，它有 100 个步骤，每一步增加 top 1 像素。使用程序来生成这样的 css 是合乎逻辑的。

@keyframes animation

    0%   top:0px;
    1%  top:1px;
    2%  top:2px;
    ...
    99%  top:99px;
    100% top:100px;

虽然这可以在 JS 中轻松完成，但我想知道是否有办法在 SASS 中完成。

我现在遇到的主要问题是我找不到动态生成步骤选择器的方法（1%、2%、3% 等）。

我已经尝试过#string 语法，但是如果在百分比选择器中使用它会产生无效的语法错误，例如：

$num: 100;

@keyframes animation

    #num%   top:0px;

任何关于如何正确执行此操作的想法将不胜感激。

【问题讨论】：

好问题——但我认为这个例子很糟糕，因为线性动画不需要 100 个关键帧，0 % 和 100 % 就足以在这里实现相同的效果。

这非常适合动画径向渐变

【参考方案1】：

在将整个值打印为字符串之前生成百分比变量。 sass 处理百分比单位之间的数字运算，因此您可以使用 $i 变量

@keyframes manySteps 
  @for $i from 0 through 100 
    $percent: 0% + $i;
    #$percent  top: 1px;