在动画延迟中使用 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 函数，例如

rgba()

。计算结果是在运行时/客户端生成的。如果你想在 sass 级别上计算，只需编写像

$i / 2

这样的表达式，最终的 css 将具有计算值。在这里，我在 sass 参考中为您找到了它：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#number_operations

回答你的问题：

animation-delay: $i / 2;

在你的for循环中就可以了。

Answer 2

你是否找到其他方法让它工作而不是使用这种方式animation-delay: $i / 2; ??因为它会发出警告，指出 / 除法将被弃用