Building the grid
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 ...
Get Mastering Sass now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.