Better CSS Building with Sass and Compass

Published on May 24, 2012
Having worked on the web for years I've been subjected to huge and often scattered CSS stylesheets that comprise a large enterprise level site. Even my own site has had its moments of crazy style mishaps and multiple declared elements based on stylesheet organization issues. However for the past few weeks I have been working on converting the stylesheets for both this site and my new [Centurion framework](https://github.com/jhough10/Centurion) into SCSS stylesheets for optimized organization of styles. Being able to find something quickly and easily can make all the difference. ## Sass and SCSS CSS can be cumbersome when writing large stylesheets that comprise of thousands of lines of code. When I started beating my head against the desk a few weeks ago while writing some updates for a my new framework [Centurion](https://github.com/jhough10/Centurion). I started thinking there had to be an easier way to make updates to a large framework that didn't involve me changing value, after value, after value. There was and in came in the form of Sass or SCSS. Think of SCSS as "Sassy CSS" as it states on the [Sass website](http://sass-lang.com/). Let's dive into what SCSS looks like. From the code below you can see that I am using variables for "green" and "margin". Yes, with Sass you can use variables to clean up your stylesheets. First, score for me. If you've ever messed with color changes then you know the lesson of grabbing the code and doing a color replace across multiple stylesheets, which can lead to problems later. What this does is creates one place you can set your variables for standard colors to keep track and then use across your stylesheets. Change once and forget it. The code above once run through the Sass compiler turns what is above into clean code like this. Did you notice the magic color? One value I set in my SCSS was to darken it by 9%. So from one green value I was able to generate a second color that was slightly darker in color based on a simple statement. ## Another Example Here I have set up a simple border-radius example, which I have had to type multiple times over the years by hand. However, with SCSS I can now tell the stylesheet what my defaults are for a border radius and then dictate those changes down the chain. These snippets are called mixins and allow you to pass values and build out portions of code that are often repetitive. Set it once and forget it. If you decide to change the values you can pass new ones to the compiler and the new values are inputted in its place. In the same way you set variables with JavaScript you can now set those same values within your CSS, which creates leaner, reusable and often scalable code. You can get exceedingly more complex in your coding style. The other night I ended up spending about 30 minutes building my own version of a stylesheet grid generator. With some complex logic I could compile a new grid layout with as little as one line of code using only three parameters to do it (gutter, column width and grid size). I will be using that feature in Centurion down the road and it adds a whole list of new complexities that I can add to my own stylesheets and projects in order to build new sites faster. ## Learn a Bit More There are a lot more useful tips under the tutorial section on the [Sass Tutorial](http://sass-lang.com/tutorial.html) page for installing Ruby and creating your first Sass stylesheet. If you are a Mac user then you're probably already familiar with Ruby and while it was a little bit of learning curve for myself it was definitely worth the effort. If you are seriously thinking about Sass to control your stylesheet nightmare then I would consider that you check out [Compass](http://compass-style.org/), which is a CSS authoring framework with a few added bonuses that you can use out of the box. ## Hate Command Line and Compiling? However, if you are not a fan of the command line like myself, then I would also look into one of two applications that build your stylesheets in realtime and monitor changes to keep your stylesheets up to date. They are the [Compass.app](http://compass.handlino.com/), which costs $10 but offers a way to monitor folders with SCSS files for changes and then instantly deploys those changes to a folder you specify. There is also a free alternative called [Scout](http://mhs.github.com/scout-app/), which does essentially the same thing without the bells and whistles. If you're interested to learn more [drop me a line](http://www.justinhough.com/get-in-touch).
Justin Hough author picture
Justin Hough

Chief Development Officer at Hounder. He is a Christian, husband, father, writer, developer, designer, and a digital carpenter crafting amazing web experience. Also, created the Centurion Framework many moons ago.