Using the same method we used for the .one-third and .two-thirds rules we can use a for loop and our bp mixin to create our four sets of classes. Each will go from 1 through 12 and will use the breakpoints we defined for small, medium, and large.
In scss/layout/_grid.scss, replace the .one-third and .two-thirds rules with the following:
@for $i from 1 through get($susy, columns) {
.col-#{$i} {
@include span($i);
&-last {
@include span($i last);
}
}
}
These nine lines of code are responsible for our mobile first set of column classes. This loops from one through 12 (which is currently the value of the $susy columns property) and creates a class for each. It also adds a class which handles removing the final columns right margin so our last column doesn't wrap onto a new line. Having control of when this happens will give us the most control. The preceding code would create...