CSS is something you stumble across easily, sometimes even kind of accidentally. Sometimes project grow larger and larger and the one file you started with gets cluttered and hard to maintain. That was one reason when I started thinking about a preprocessor, the other one was code-reusability and -customization.

As a game developer, I face the same modules in the need of customization and different looks. I guess there is no difference if you are setting up some CMS or grid-based system. We always have some base-code and some adjustable parameters. These requirements are hard to solve with CSS solely, one might end up in duplicating and adjusting code over.

Voilà, welcome Compass, Less and friends. My tool of choice is Compass and I prefer SCSS over SASS because it has more the CSS-feeling. That’s really a personal taste, some developers might prefer shorter code and enjoy getting rid of those nasty curly brackets.

Compass calls itself “CSS authoring framework” and is an extension to SASS. SASS extends CSS and adds further possibilities, e.g. the use of variables, declaring functions and splitting the code into small, reusable chunks to import. Compass extends SASS with further functions and files available for importing (e.g. a browser reset). It is also very easy to document code and release a minified file for production.

For first steps and installation, check out this beginner’s tutorial.

I first started with babysteps:

.button {
    text-align: center;
    color: hotpink;
    font-size: 1.5em;
    font-weight: 700;
    display: inline-block;
    cursor: pointer;
}

Ah that’s so much nicer:

.button {
    text-align: center;
    color: $button-font-color;
    font-size: $button-font-size;
    font-weight: $button-font-weight;
    display: inline-block;
    cursor: pointer;
}

And now spice it up with default-values (you are not forced to always declare every single variable):

$button-font-color: hotpink !default;
$button-font-size: 1em !default;
$button-font-weight: normal !default;

.button {
    text-align: center;
    color: $button-font-color;
    font-size: $button-font-size;
    font-weight: $button-font-weight;
    display: inline-block;
    cursor: pointer;
}

Those babysteps quickly evolved…

♥ reusability

Compass is designed for reusability. Structure your code in small chunks, that are imported and result in one file. You indicate those files by prefixing them with an underscore. E.g. the main file (main.scss) imports _reset.scss, _variables.scss, _colors.scss and _grid.scss. Compilation results in one file: main.css.

I love reusing modules/chunks for different projects:

No, it’s definitely not necessary to reinvent the wheel for likewise projects.

♥ customisability

Sometimes, projects are reused with small changes. E.g. a gallery with a special halloween-, easter- and christmas-look. Or – but that’s a boring example – different colors for a customer’s product lines.

You might only want to change certain parameters, such as background- and font-color, header-image, etc. You can simply write different files holding all variables and import the one suitable for the current occasion.  New looks are added easily by creating a new file and switching between different existing looks is even easier.

I love default-values and it is very important for me, that you have something to start with. Creating a game takes only a couple of minutes: There is a boilerplate to start with, but the SCSS-files just imports base-styles (e.g. buttons) and game-styles. After compiling Compass, you open the game in the browser and have something to start with. You may override the base-styles or replace them and adjust the properties for games.

These adaptions are a little bit of an investment when creating the Compass-template for a new product, but it’s not that bad and it pays off when implementing a similar project way faster. Oh wait, maybe it already pays off when having a long project duration with a lot of changes…

♥ maintainability

Bundling all customizable properties in a separate partial, is perfect for relaxing with changes. For larger projects, it is recommended to split these properties, e.g. into Variables, Colors, Mixins, Typography, etc. As I am working on smaller projects, I prefer one partial that holds all properties because you only need to scan through one single file.

A little bit more offset between grid-elements, blue instead of black text, larger (LARGER!) logos – no problem, simply adjust the variables.
In addition, Compass supports us with build-in functions, such as:

And a little bonus that I like very much for documentation. Compass supports two types of comments:

Summary

CSS is easy to start with but also easy to write bad code and a preprocessor will never solve this problem. Quite the contrary, it supports poor code as it makes over-nesting easy. Therefore use it wisely with the compiled CSS-code in mind to optimize your workflow.