Sass and Compass for Designers

Multiple columns

The CSS Multi-column Layout Module (http://www.w3.org/TR/css3-multicol/) specifies how an author can display content within an element across a number of columns. Compass has a mixin to produce the necessary cross-browser code. I'll be honest, this isn't something I use very often (with large amounts of text you have to scroll down and then back up to carry on reading which feels wonky), but it's nice to have regardless. We'll add an HTML class to the second paragraph of our markup and then use this mixin:

.two-cols {
  @include column-count(3);
}

Here is the effect in the browser:

We can amend this further by adding in a dividing rule ...