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中的像素

1 个答案: