Mastering Sass

The span mixin

Next we'll need to replace the properties of our one-third and two-thirds with the span mixin. This will be temporary just so we can see how the span mixin works. Later, we'll create a grid system like that of Bootstrap, Foundation, or Breakpoint. We'll also use the Susy mixins in to allow for more semantic markup. This means we'll keep the use of special classes such as container or col-6-sm to a minimum.

With our current styles we used a class of .column to apply properties which would be needed for all our columns, regardless of their width. These properties include padding on the left and right, float, and then removing the float on the left or right if the column was the first or last column. The span mixin is diverse enough ...