DougHughes.net

Cascading StyleSheets are a great thing for front end development. However, they have their short comings, especially for somebody that comes from a structure programming background. It seem no matter what methodology or organizational pattern I try, I always get to the end and my stylesheets feel like a jumbled mess of spaghetti.

I have several projects in process right now that require front end development, so I have been continuing my search for a better pattern for CSS development. This time, in my search I came across a couple of tools for developing style sheets. Both of these tools have come out of the Rails community, but are easily used with any kind of front-end development.

First, SASS (Syntactically Awesome Stylesheets) is a styling language with a very familiar style for those used to writing standard CSS code. However, SASS is much more powerful and thus allows for a more structured approach for creating and managing style sheets. For example, how many times have you had a single color that needed to be used across a whole collection of style rules? If you ever needed to change that color, then you would have to locate all of the places in each of your stylesheets where the hex code was used, determine if the change is applicable, and make the change to the new hex code. With SASS, you can define a variable such as:

!emphasisColor = #2277AA

Then, in your SASS document, you can use that variable as you would a variable in traditional server side code. When you need to change colors, you change it in one place. This is obviously a simple example, but SASS includes other more powerful functionality such as reusable modules, mix-ins, inheritance, and much more. Obviously SASS code is not interpreted by the browser, so how does the SASS stylesheet become a CSS stylesheet?

This is where Compass comes into play. Compass is a Ruby based tool which at in its simplest form converts SASS into CSS. I was able to set up Ruby and Compass in less than five minutes, along with having a sample project setup and working. Creating a new project is simply a matter of running a command line script telling Compass where your source SASS files are located and where the generated CSS files should be placed. You can then setup Compass to automatically watch your source SASS files and automatically generate the CSS files faster than you can switch to your web browser and reload the page. Very cool!

Compass has a lot more functionality than I have been able to play with this far. However, one simple example is its power to leverage SASS and a CSS frameworks such as Blueprint together. One of the qualms I have with most of the CSS frameworks is their use of nice friendly rules like span-8. Having a style rule like this means that embedded in my HTML code are rules that describe its layout, not function. I would much rather label a div with the id of header instead of span-8. With Compass and SASS, we can accomplish just that. Take for example the following SASS code:

body#index
#header
+column(24)
h1
:float left
#site-actions
:float right
+horizontal-list
#navigation
+column(5)
#main-content
+column(19,true)
#footer
+column(24)
#legalese
+column(20)
#footer-links
+column(4,true)

This code in SASS describes the entire page layout for a standard header, two column, plus footer layout using the Blueprint CSS framework. If you look closely, we have a selector called header which extends the base Blueprint classes and defines the width of 24 columns. Once converted to CSS code, the result looks like this:

body#index #header {
    display: inline;
    float: left;
    margin-right: 10px;
    width: 950px;
}
* html body#index #header {
    overflow-x: hidden;
}
body#index #header h1 {
    float: left;
}
body#index #header #site-actions {
    border: 0px;
    display: inline-block;
    float: right;
    margin: 0px;
    outline: 0px;
    overflow: hidden;
    padding: 0px;
}
body#index #header #site-actions {
    display: block;
}
body#index #header #site-actions li {
    display: inline;
    float: left;
    list-style-type: none;
    margin-left: 0px;
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap;
}
body#index #header #site-actions li.first {
    padding-left: 0px;
}
body#index #header #site-actions li.last {
    padding-right: 0px;
}
body#index #navigation {
    display: inline;
    float: left;
    margin-right: 10px;
    width: 190px;
}
* html body#index #navigation {
    overflow-x: hidden;
}
body#index #main-content {
    display: inline;
    float: left;
    margin-right: 0px;
    width: 750px;
}
* html body#index #main-content {
    overflow-x: hidden;
}
body#index #footer {
    display: inline;
    float: left;
    margin-right: 10px;
    width: 950px;
}
* html body#index #footer {
    overflow-x: hidden;
}
body#index #footer #legalese {
    display: inline;
    float: left;
    margin-right: 10px;
    width: 790px;
}
* html body#index #footer #legalese {
    overflow-x: hidden;
}
body#index #footer #footer-links {
    display: inline;
    float: left;
    margin-right: 0px;
    width: 150px;
}
* html body#index #footer #footer-links {
    overflow-x: hidden;
}

In other words, that simple, concise bit of SASS code was able to leverage the Blueprint framework, but generate a custom CSS stylesheet which only contains the semantic rules that I need and is well structure. I am still getting my feet wet with Compass and SASS, but thus far, I will have to say this is impressive.