O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required