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 makes the last...