[SOLVED] Using SASS and CSS calc() within an animation delay

Using SASS and CSS calc() within an animation delay

I'm attempting to calculate (using CSS calc()) within an animation delay using SASS but it doesn't seem to output the result of the calculation (and rather just the calculation itself).

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

    }
}

Any thoughts where I am going wrong?

Solution

It's because calc() is not sass function. It's just css function, like rgba(), for example. The result of calc is made on runtime/client side. If you want to calculate this on sass level, just write expression like $i / 2 and final css will have calculated values. Here, I found it in sass reference for you: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#number_operations

To answer your question: animation-delay: $i / 2; in your for-loop will be just fine.