css - Laravel Mix webpack scss 在 for 循环内 multiply 编译错误

Question

我有一个问题，我猜是 webpack。

我有一个 Laravel 5.6 安装，它通过 Laravel Mix 和 webpack 将 scss 编译成 css。 (我还安装了 TailwindCSS，但应该可以正常工作。)

我有以下 SCSS:

@for $i from 1 through 10 {
    p.animated-opacity, a.animated-opacity {
        &:nth-child(#{$i}) {
            animation-delay: #{$i} * 2s;
        }
    }

    input.animated-opacity, button.animated-opacity, select.animated-opacity {
        &:nth-child(#{$i}) {
            animation-delay: (2s * #{$i - 1}) + 1s;
        }
    }
}

它使用 Laravel Mix 和 webpack 将自身编译为:

main p.animated-opacity:nth-child(1),
main a.animated-opacity:nth-child(1) {
    -webkit-animation-delay: 1 * 2s;
    animation-delay: 1 * 2s;
}

main input.animated-opacity:nth-child(1),
main button.animated-opacity:nth-child(1),
main select.animated-opacity:nth-child(1) {
    -webkit-animation-delay: 2s * 0 + 1s;
    animation-delay: 2s * 0 + 1s;
}

main p.animated-opacity:nth-child(2),
main a.animated-opacity:nth-child(2) {
    -webkit-animation-delay: 2 * 2s;
    animation-delay: 2 * 2s;
}

然后继续，直到到达第十个 child 。但是，它应该编译为:

main p.animated-opacity:nth-child(1),
main a.animated-opacity:nth-child(1) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

main input.animated-opacity:nth-child(1),
main button.animated-opacity:nth-child(1),
main select.animated-opacity:nth-child(1) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

main p.animated-opacity:nth-child(2),
main a.animated-opacity:nth-child(2) {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

我在做什么，或者 Laravel Mix/Webpack 做错了什么？

提前致谢

Answer 1

发现，通过将秒数包装在 calc() 中它可以工作，并且浏览器可以正确呈现它。 SCSS 现在是:

@for $i from 1 through 10 {
    p.animated-opacity, a.animated-opacity {
        &:nth-child(#{$i}) {
            animation-delay: calc(#{$i} * 2s);
        }
    }

    input.animated-opacity, button.animated-opacity, select.animated-opacity, label.animated-opacity {
        &:nth-child(#{$i}) {
            animation-delay: calc((2s * #{$i - 1}) + 1s);
        }
    }
}