Mastering Sass

The last keyword

Remember we had our .column class, which not only handled floats and padding, it also removed the padding from the last column in a row The span mixin doesn't do this by default. Instead, you need to implicitly specify this behavior. We can do this by adding a :last-child  pseudo-selector and using the keyword last after our values:

.one-third { 
    @include span(12 of 12); 
 
    @include bp { 
        @include span(4 of 12); 
 
        &:last-child {

            @include span(4 of 12 last);

        } 
    } 
} 
 
.two-thirds { 
    @include span(12 of 12); 
 
    @include bp { 
        @include span(8 of 12); 
 
        &:last-child {

            @include span(8 of 12 last);

        } 
    } 
} 

By default, the span mixin works by calculating the width and also applying a gutter (margin or padding) to the right of each column. This ...