Verwendung von SASS und CSS calc() innerhalb einer Animationsverzögerung

Question

Ich versuche zu berechnen (mit CSS calc()) innerhalb einer Animation Verzögerung mit SASS, aber es scheint nicht das Ergebnis der Berechnung (und eher nur die Berechnung selbst).

.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}; 

    } 
} 

Irgendwelche Gedanken, wo ich falsch liege?

Answer 1

Es ist, weil calc() nicht Sass-Funktion ist. Es ist nur css function, wie zum Beispiel rgba(). Das Ergebnis von calc wird auf Laufzeit-/Clientseite gemacht. Wenn Sie dies auf der Sass-Ebene berechnen möchten, schreiben Sie einfach einen Ausdruck wie $i/2 und final css wird die berechneten Werte haben. Hier fand ich es in Sass-Referenz für Sie: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#number_operations

Um Ihre Frage zu beantworten: animation-delay: $i/2; in Ihrem for-Schleife wird gut.