css - 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;
        }
    }