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

by Charles Max Wood on March 25, 2011

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

  • Jules

    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!

    • Jules

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

      Cheers.

    • http://teachmetocode.com Charles Max Wood

      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.

  • Jules

    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!

    • Jules

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

      Cheers.

    • http://teachmetocode.com Charles Max Wood

      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.

  • Anonymous

    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?

    • http://teachmetocode.com Charles Max Wood

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

  • Anonymous

    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?

    • http://teachmetocode.com Charles Max Wood

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

  • Chris Colman

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

    Compass makes things easy!

Previous post:

Next post: