Compass plugins make for nicer SCSS

January 20, 2012

As I’ve mentioned previously, I’ve started using Compass and SCSS to handle the CSS styling of my site. SCSS has the advantage of mixins, variables, nesting and inheritance, which can make for much more readable style files. Automatic generation of tidy, compressed CSS output is then as simple as:

compass compile

What I hadn’t used before, however, was perhaps the killer feature of Compass itself. Compass comes with plugins, and an extensible architecture, allowing you to import CSS defaults (such as reset.css and 960gs) without cluttering your main CSS file, and still leveraging the power of the SCSS system. For those unused to grid layouts, 960gs is my personal goto, but there are others out there.

There is a 960 grid plugin for Compass available via nexmat on Github. It makes working with SCSS and grids as simple as a couple of lines of code.

All you need to do is to add to your Compass config (e.g. config.rb):

require 'ninesixty'

And then to your SCSS file (e.g. page.scss):

@import 'compass/reset';
@import '960/grid';

That enables the 960 mixins, and then you need to utilise the grids. There are two options, first, to create a class based grid system (analogous to the original 960gs you are probably familiar with):

.container_12 {
    @include grid-system(12);
}

Alternatively, you can make your own ‘Semantic Grids’, attaching the grid mixins to your own elements. Details can be found in the README over at Github.