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

【问题标题】：SASS width percentage in @for loop@for 循环中的 SASS 宽度百分比
【发布时间】：2019-03-05 18:05:06
【问题描述】：

我还有一个问题似乎无法在任何地方得到解答。

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

我做了这个：

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

但是 IntelliJ 抛出错误..

【问题讨论】：

IntelliJ 的错误信息是什么？
它给了它一条红色的皱纹线，如果我把它放在 Sassmeister 中，它会说：预期的表达。第 4 行第 11 列的标准输入 4:11 根样式表
但是，它确实可以编译并且也可以工作。例如，.width-percentage-80 为元素提供了 80% 的宽度。很奇怪..IntelliJ 似乎不喜欢它。跨度>

【解决方案1】：

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

未定义的操作“0 % !important”。

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

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

【讨论】：