एसएएसएस का उपयोग कर गतिशील रूप से CSS3 कीफ्रेम चरणों को कैसे उत्पन्न करें?

Question

मान लें कि मेरे पास एक महत्वपूर्ण फ्रेम एनीमेशन है जिसमें 100 कदम हैं जो top प्रत्येक चरण में 1 पीएक्स बढ़ाते हैं। इस तरह के एक सीएसएस उत्पन्न करने के लिए एक प्रोग्राम का उपयोग करना तार्किक होगा।

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

हालांकि यह जेएस में आसानी से किया जा सकता है, मैं जानना चाहता हूं कि एसएएसएस में ऐसा करने का कोई तरीका है या नहीं।

मुझे अभी मुख्य समस्या है कि मुझे गति चयनकर्ताओं को गतिशील रूप से उत्पन्न करने का कोई तरीका नहीं मिला (1%, 2%, 3% आदि)।

मैं #{string} वाक्य रचना की कोशिश की है, लेकिन यह उदाहरण के लिए यदि प्रतिशत चयनकर्ताओं में इस्तेमाल गलत सिंटैक्स त्रुटि का उत्पादन करेगा,:

$num: 100; 

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

} 

कैसे सही ढंग से यह करने के लिए पर कोई विचार की सराहना की जाएगी।

Answer 1

प्रतिशत वैरिएबल उत्पन्न करने से पहले पूरे मान को स्ट्रिंग के रूप में मुद्रित करें। तो आप उपयोग कर सकते हैं सास प्रतिशत इकाइयों के बीच संख्या के संचालन संभालती $ मैं चर

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