Utilisation de SASS et CSS calc() dans un délai d'animation

Question

Je tente de calculer (en utilisant CSS calc()) dans un délai d'animation en utilisant SASS mais il ne semble pas sortir le résultat du calcul (et juste le calcul lui-même).

.home-slider-container .home-slider .each-slide svg .letter { 
    opacity: 0; 
    animation: svgAnimate 4s linear; 
} 

@for $i from 1 through 8 { 
    .home-slider-container .home-slider .each-slide svg .letter-#{$i} { 
     $test: calc(#{$i}/2); 
     animation-delay: #{$test}; 

    } 
} 

Des pensées où je me trompe?

Answer 1

C'est parce que calc() n'est pas la fonction sass. C'est juste css function, comme rgba(), par exemple. Le résultat de calc est effectué du côté de l'exécution/du client. Si vous voulez calculer ceci au niveau de sass, écrivez juste l'expression comme $i/2 et le css final aura des valeurs calculées. Ici, je l'ai trouvé dans la référence sass pour vous: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#number_operations

Pour répondre à votre question: animation-delay: $i/2; dans votre boucle sera très bien.