Im looking to increment pixel value in multiples of 100. I am using the @for loop in sass pulling the number of the div and multiplying that by 100.
It works great until I start exceeding 10. Because I want each batch of 10 to go from 100px to 1000px, but from 11 onward I end up with 1100px and up, which is too much.
Is there maybe a 100px++ in sass?
Hope this makes sense
Please view my sass function below
.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; } } }Desired 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; }Start from 100 again
.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; }1 Answer
Why don't you just subtract 10 from i before multiplying?
@for $i from 11 through 20 { &--#{$i} { margin-top:100px; margin-left:#{(($i - 10) * 100)}px; } }
