Compass, SASS, and the 960 Grid System – Delicious Clone

In preparing to show off SASS, I found the Compass system, which uses SASS and organizes your stylesheets in a unique way. In this tutorial, I walk you though installing compass, installing the 960 grid system, and organizing your SASS stylesheets in an intelligent way.

One note, I couldn’t remember the URL for the 960 grid system. It’s http://960.gs

Download 158.5 MB
Download (iPod & iPhone) 97.3 MB

{ 11 comments… read them below or add one }

Jules March 25, 2011 at 1:45 pm

This is a good intro for people who haven’t touched Compass/SASS before – but you’re missing one of the biggest reasons SASS was made.

It encourages you to use semantic ID’s and Class names and lets you reduce ‘divitis’, so that you don’t have to end up with horrible, horrible things like:

etc…

i.e. – presentational class names all over the place, and divs used only for the purpose of making bad css work.

The big idea of mixins is that you can do all of that ugly nesting in the SASS file – but it’s much more maintainable.

Similarly – with the variables – you should be doing things more like:

$light_bg_color:#eee;
$main_text_color:#333;
$accent_color:blue;

Rather than $blue:#00F; etc. (i.e. don’t use presentational names here either – the client may decide to change it to green – and then you’ll be using the variable $blue when you want something to be green…

SASS also allows really cool things like

(following on from above)…

$link_color:$accent_color;
$link_hover_color:$accent-color*2;
$link_visited_color:$accent_color + $main_text_color;

i.e. you can assign variables to variables and perform transformations on the colors – very, very cool!

This way – you can have one partial, listing (say) 5 colors, and then by editing 5 lines of code, your entire site can change character.

Good video though – thanks for all your work too, the RoR community needs people like you!

Reply

Jules March 25, 2011 at 1:48 pm

The code didn’t format very well there, and it tried auto-closing the tags – so ignore the ><br> <ul mess.

Cheers.

Reply

Charles Max Wood March 25, 2011 at 2:12 pm

Thanks for the input Jules. I can see how it could be used to keep your markup cleaner, not just your CSS.

I also wanted to go into mixins, but I didn’t have time to come up with a great example. I’ll probably cover it in another episode.

Reply

Jules March 25, 2011 at 1:45 pm

This is a good intro for people who haven’t touched Compass/SASS before – but you’re missing one of the biggest reasons SASS was made.

It encourages you to use semantic ID’s and Class names and lets you reduce ‘divitis’, so that you don’t have to end up with horrible, horrible things like:

etc…

i.e. – presentational class names all over the place, and divs used only for the purpose of making bad css work.

The big idea of mixins is that you can do all of that ugly nesting in the SASS file – but it’s much more maintainable.

Similarly – with the variables – you should be doing things more like:

$light_bg_color:#eee;
$main_text_color:#333;
$accent_color:blue;

Rather than $blue:#00F; etc. (i.e. don’t use presentational names here either – the client may decide to change it to green – and then you’ll be using the variable $blue when you want something to be green…

SASS also allows really cool things like

(following on from above)…

$link_color:$accent_color;
$link_hover_color:$accent-color*2;
$link_visited_color:$accent_color + $main_text_color;

i.e. you can assign variables to variables and perform transformations on the colors – very, very cool!

This way – you can have one partial, listing (say) 5 colors, and then by editing 5 lines of code, your entire site can change character.

Good video though – thanks for all your work too, the RoR community needs people like you!

Reply

Jules March 25, 2011 at 1:48 pm

The code didn’t format very well there, and it tried auto-closing the tags – so ignore the ><br> <ul mess.

Cheers.

Reply

Charles Max Wood March 25, 2011 at 2:12 pm

Thanks for the input Jules. I can see how it could be used to keep your markup cleaner, not just your CSS.

I also wanted to go into mixins, but I didn’t have time to come up with a great example. I’ll probably cover it in another episode.

Reply

Anonymous March 27, 2011 at 2:30 pm

I’ve been using Compass for a while now with the default blueprint column functions.

Why don’t you use the default blueprint css and why do you think 960 is better?

Reply

Charles Max Wood March 28, 2011 at 2:40 pm

Honestly, I’ve been using the 960 Grid System for a while. I was just sticking with what I know.

Reply

Anonymous March 27, 2011 at 2:30 pm

I’ve been using Compass for a while now with the default blueprint column functions.

Why don’t you use the default blueprint css and why do you think 960 is better?

Reply

Charles Max Wood March 28, 2011 at 2:40 pm

Honestly, I’ve been using the 960 Grid System for a while. I was just sticking with what I know.

Reply

Chris Colman August 13, 2011 at 3:47 am

The Compass way to remove li bullets is:
+no-bullets

Compass makes things easy!

Reply

Leave a Comment