在scss中使用@for循环

Question

我需要在 SCSS 中创建一个“@for”循环，从 1 循环到 100，并相应地将数字添加到类中。我有一个类“width-percentage-x”，x 应该是与循环索引相对应的数字。我不知道我做错了什么！

@for $i from 1 through 100 {
    .width-percentage-#{$i} {
        img {
            width: $i%;
        }
    }
}

在这种情况下，如果是

width-percentage-30

，那么这个

img

内的

div

应该有

width:30%;

。此循环创建我需要的类列表，但不会将相应的

width

添加到

img

，由于某种原因，它只渲染

width:50%;

。

Answer 1

使用计算：

@for $i from 1 through 100 {
    .width-percentage :nth-child(#{$i}) {
        width: calc(#{$i}% + 0px);
        border: 1px solid #f99;
    }
}

https://codepen.io/saravanapriyanm/pen/QWYjyEd

Answer 2

看来我的语法有点错误！

    @for $i from 1 through 100 {
        .width-percentage-#{$i} {
            img {
                width: 0% + $i;
            }
        }
    }

像这样现在就可以了！