@for 循环中的 SASS 宽度百分比

Question

我还有另一个问题，似乎在任何地方都找不到答案。

目前正在与一个需要自定义类来设置其元素样式的团队合作。他们想要一个宽度百分比类，他们可以将任何东西放在任何东西上，使某些东西具有一定的百分比宽度。

我做的：

@for $i from 0 through 100 {
    .width-percentage-#{$i} {
        width: #{$i}% !important;
    }
}

但是 IntelliJ 抛出了一个错误..

Answer 1

使用 DartSass 会出现此错误。应显示以下错误：

未定义的操作“0%！重要”。

我想 DartSass 尝试使用%as数学运算符模，这是不可能的，因为!important不是一个数字（并且$i是插值的）。您需要插入%太 ( #{"%"})：

@for $i from 0 through 100 {
    .width-percentage-#{$i} {
        width: #{$i}#{"%"} !important;
    }
}