SASS kullanarak CSS3 ana kare adımları dinamik olarak nasıl oluşturulur?

Question

Her adımda top değerini 1 px artıran 100 adımı olan bir anahtar kare animasyonum olduğunu varsayalım. Böyle bir css oluşturmak için bir program kullanmak mantıklı olacaktır. Bu JS kolayca yapılabilir iken

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

, ben SUKDÖ'nün bunu yapmanın bir yolu varsa bilmek istiyorum.

Şu anda yaşadığım asıl sorun, dinamik olarak basamak seçicilerini (% 1,% 2,% 3 vb.) Oluşturmak için bir yol bulamadım.

Ben #{string} sözdizimi denedi ancak yüzde seçicileri kullanılırsa örneğin, geçersiz bir yazım hatası üretecektir:

$num: 100; 

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

} 

doğru bunu nasıl herhangi bir fikir mutluluk duyacağız.

Answer 1

Yüzde değişkenini oluşturmadan önce tüm değeri bir dize olarak yazdırın. Kullanmak böylece küstahlık yüzdesi birimleri arasındaki sayı işlemlerini yönetir $ i değişkeni

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