如何使用SASS动态生成CSS3关键帧步骤？ [英] How to dynamically generate CSS3 keyframe steps using SASS?

问题描述

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

Let's say I have a key frame animation that has 100 steps that increases top by 1 px in each step. It would be logical to use a program to generate such a css.

@keyframes animation
{
    0%   {top:0px;}
    1%  {top:1px;}
    2%  {top:2px;}
    ...
    99%  {top:99px;}
    100% {top:100px;}
}

虽然这可以很容易地在JS中完成，但我想知道是否有方法做在SASS。

While this can be done easily in JS, I want to know if there is a way to do it in SASS.

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

The main problem I'm having right now is I could not find a way to dynamically generate the steps selectors (1%, 2%, 3% etc) .

我尝试了＃{string} 语法，但会产生无效的语法错误如果用于百分比选择器，例如：

I have tried #{string} syntax but it will produce an invalid syntax error if used in the percentage selectors, for example:

$num: 100;

@keyframes animation
{
    #{num}%   {top:0px;}

}

如何正确地做任何想法将不胜感激。

Any idea on how to do this correctly would be appreciated.

推荐答案

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

generate the percentage variable before then print the entire value as a string. sass handles number operations between percentage units so you can use the $i variable

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

这篇关于如何使用SASS动态生成CSS3关键帧步骤？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！