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

Question

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

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

我做了这个：

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

但是 IntelliJ 抛出错误..

Answer 1

您使用 DartSass 时遇到此错误。应显示以下错误：

Undefined operation "0 % !important".

我想 DartSass 尝试使用 % 作为 math operator 模数，这是不可能的，因为 !important 不是数字（并且 $i 是内插的）。您也需要插入 % (#{"%"}):

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

SASS width percentage in @for loop