在动画延迟中使用 SASS 和 CSS calc()

Question

我正在尝试使用 SASS 在动画延迟内计算（使用 CSS calc()），但它似乎没有输出计算结果（而是只是计算本身）。

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

    }
}

有没有想过我哪里出错了？

Answer 1

因为calc()不是sass函数。只是 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

回答您的问题：animation-delay: $i / 2; 在您的 for 循环中就可以了。

在动画延迟中使用 SASS 和 CSS calc()

Using SASS and CSS calc() within an animation delay

css

animation

sass

calc