Generate multiple CSS classes with Compass

Needed to position a bunch of elements (<30) sequentially and I always prefer a CSS solution to a verbose JS one, however I'm not about to write 30+ classes cause that would be too much work. Luckily I'm using compass and they have a neat trick where you can use a for loop to rapidly generate a bunch of classes.

@for $i from 0 through 30 {
    &:nth-child(#{$i}) {
       margin-left: percentage($i); // compass function that will convert any number to a percentage
    }
}

Thanks to the wordiness of SASS it is pretty self explanatory.