Sass 中的增量像素

Question

我希望以 100 的倍数增加像素值。我在 sass 中使用 @for 循环提取 div 的数字并将其乘以 100。

在我开始超过 10 之前效果很好。因为我希望每批 10 个从 100px 到 1000px，但是从 11 开始我最终得到 1100px 及以上，这太多了。

sass 中可能有 100px++ 吗？

希望这是有道理的

请在下方查看我的sass函数

.horz {
        width:100px;
        height:10px;
        @for $i from 1 through 10 {
            &--#{$i} {
                margin-left:#{($i * 100)}px;
            }
        }
        @for $i from 11 through 20 {
            &--#{$i} {
                margin-top:100px;
                margin-left:#{($i * 100)}px;
            }
        }
    }

想要CSS

    .horz {
        width: 100 px;
        height: 10 px;
    }

    .horz--1 {
        margin-left: 100 px;
    }

    .horz--2 {
        margin-left: 200 px;
    }
    .horz--3 {
        margin-left: 300 px;
    }
    .horz--4 {
        margin-left: 400 px;
    }
    .horz--5 {
        margin-left: 500 px;
    }
    .horz--6 {
        margin-left: 600 px;
    }
    .horz--7 {
        margin-left: 700 px;
    }
    .horz--8 {
        margin-left: 800 px;
    }
    .horz--9 {
        margin-left: 900 px;
    }
    .horz--10 {
        margin-left: 1000 px;
    }

再次从 100 开始

    .horz--11 {
        margin-top: 100 px;
        margin-left: 100 px;
    }
    .horz--12 {
        margin-top: 100 px;
        margin-left: 200 px;
    }
    .horz--13 {
        margin-top: 100 px;
        margin-left: 300 px;
    }
    .horz--14 {
        margin-top: 100 px;
        margin-left: 400 px;
    }
    .horz--15 {
        margin-top: 100 px;
        margin-left: 500 px;
    }
    .horz--16 {
        margin-top: 100 px;
        margin-left: 600 px;
    }
    .horz--17 {
        margin-top: 100 px;
        margin-left: 700 px;
    }
    .horz--18 {
        margin-top: 100 px;
        margin-left: 800 px;
    }
    .horz--19 {
        margin-top: 100 px;
        margin-left: 900 px;
    }
    .horz--20 {
        margin-top: 100 px;
        margin-left: 1000 px;
    }

Answer 1

你为什么不在乘法之前从 i 中减去 10？

    @for $i from 11 through 20 {
        &--#{$i} {
            margin-top:100px;
            margin-left:#{(($i - 10) * 100)}px;
        }
    }

Sass 中的增量像素

Increment pixels in Sass

css

sass