Laravel mix webpack scss compile error on multiply inside for loop

Question

我有问题，我猜是 webpack。

我有一个 Laravel 5.6 安装，它通过 Laravel 将 scss 编译为 css 与 webpack 混合。（我还安装了 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);
        }
    }
}

Laravel mix webpack scss compile error on multiply inside for loop

Laravel Mix webpack scss compile error on multiply inside for loop

css

sass

laravel

webpack

laravel-mix