We take a look at using Sass, Compass and Prepos in your web projects to speed up your development times.

Sass - Syntactically Awesome Style Sheets, Compass and Prepos

With web technologies constantly changing and applications gradually becoming more complex in both design and computational power or demand, it can be hard to find a chance to bring yourself up to speed with some of the truly useful tools out there whilst trying to refactor and maintain your existing codebase.

One of the more recent advancements is that of Sass; syntactically awesome style sheets.

If you've not heard of Sass, it's a simple (relatively, for now) short-hand CSS type that will speed up developing your website styles.

Using Sass and Compass, you're able to generate optimised CSS output that you can use on your applications. It reads the Sass (.scss or .sass) file and compiles it into readable (though it  doesn't have to be) CSS.

Setting up Compass

To get Compass up and running you'll need to install Ruby. If you're using an OS X machine, you've already got Ruby installed whilst Windows users can use the RubyInstaller for Windows.
http://rubyinstaller.org/

Once Ruby is up and running you can install Compass by opening a new terminal / command prompt:

Windows:
gem install compass

OS X:
sudo gem install compass

Making it Easier - Prepos

Prepos is a web design and development tool that'll handle all the manual labour and make managing your projects much easier. It'll preprocess, optimise and test your application code to keep your workflow supercharged.

Using Prepos you can organise all of your project assets and easily flick between multiple projects at once. It's able to handle all the hard-work for you by automatically compiling your Sass into CSS. It also sits nicely on-top of Compass - you can select to use compass or import it yourself in the Sass.

With compass you typically use a configuration file whilst Prepos gives you a nice user controlled interface to update how the code is compiled and select the basic options for each file in your project.

Oh and it'll also handle all of your Javascript, minify it and then aggregate all your code. Yep, and it has an image optimiser and web-server built in. It's pretty nifty.

Sass - The Basics

One thing I always used to hate about writing up CSS was how long-winded everything was. With most programming languages, web developers will look for ways to segment and fragment their code down into smaller blocks. But you couldn't really achieve the same thing easily with CSS unless you had a way to minify all your CSS modules into one, but that's time you'll need to spend doing that.

Sass helps out by letting you break large style sheets into segments. You still refer to them using the @import directive (in a new, briefer form), and when your .scss files are processed, the contents of the segment are inserted directly into the output CSS.

@import "reset";
@import "buttons";
@import "forms";

Sass introduces variables into your code that allow you to take advantage of repeated colours, font names, string patterns, etc. or the use of mixins / functions to output repeated elements.

$variableColour: #333;
$small-screens: "only screen and (max-width: 320px)";
// Now to use a media query
@media #{$small-screens} { }

Now that you can split your files up and create variables, we need to tackle the biggest drawback of CSS. DRY. That is, Don't Repeat Yourself. Sass lets you throw together shorthand and nest your elements so that you don't have to waste time writing the same element over and over again.

.container {
    padding: 0;
}
.container h1 {
    margin: 0;
    color: #333;
}
.container p {
    margin: 1em 0;
    color: #666;
}

Whilst in Sass you can simply put:

.container {
    padding: 0;
    h1 {
        margin: 0;
        color: $variableColour;
    }
    p {
        margin: 1em 0;
        color: #666;
    }
}

You can keep nesting as far down as you need without having to worry about any limits, just keep going down your DOM hierarchy. Sass also handles attached events by referencing to the parent style with the ampersand "&".

.container {
    padding: 0;
    h1 {
        margin: 0;
        color: $variableColour;
    }
    p {
        margin: 1em 0;
        color: #666;
    }
    a {
        color: blue;
        &.disabled {
            color: #ff0000;
        }
        &:hover {
            color: $variableColour;
        }
    }
}

Putting everything together, you can use variables, nest elements, media queries and keep down on the time you actually spend writing code.

.container {
    padding: 0;
    h1 {
        margin: 0;
        color: $variableColour;
        font-size: 30px;
        @media #{$small-screen} {
            font-size: 22px;
        }
    }
    p {
        margin: 1em 0;
        color: #666;
        font-size: 16px;
        @media #{$small-screen} {
            margin: 0.6em 0;
            font-size: 12px;
        }
    }
    a {
        color: blue;
        &.disabled {
            color: #ff0000;
        }
        &:hover {
            color: $variableColour;
        }
    }
}

Do you use Sass, let us know what you think of it!

3
Ignite your brand, utilise user-generated content no matter where you or your audience are ›