如何使用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屋!