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

【问题标题】：Using SASS and CSS calc() within an animation delay在动画延迟中使用 SASS 和 CSS calc()
【发布时间】：2017-12-15 06:39:43
【问题描述】：

我正在尝试使用 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};

    }
}

有什么想法我哪里出错了吗？

【问题讨论】：

试试$test: $i / 2;。

标签： css animation sass calc

【解决方案1】：

这是因为calc() 不是 sass 函数。只是css function，例如rgba()。 calc 的结果是在运行时/客户端生成的。如果你想在 sass 级别上进行计算，只需编写像 $i / 2 这样的表达式，最终的 css 就会有计算值。在这里，我在 sass 参考中为您找到了它：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#number_operations

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

【讨论】：