Sass and Compass for Designers: If you know HTML and CSS, then you can have all the power of Sass and Compass at your disposal. This step-by-step guide will take you through the time-saving features that makes it so much easier to create cross-browser CSS.

My initial reaction when looking at the CSS preprocessor Sass was, 'If it ends up producing CSS, why don't I just write CSS?' Turns out, this is a reaction many people have. After all, we use CSS everyday. We can (hopefully) use it to fix all the usual layout problems that get thrown at us, build responsive websites that are displayed beautifully on all devices, and generally make ourselves feel like, for the most part, we know what we are doing.

Let's be clear from the outset. Sass won't necessarily make us produce better CSS. For example, if you don't understand how to use CSS now, Sass and Compass won't fill that gap in your knowledge. However, Sass enables us to write CSS faster and more easily while also keeping the style sheets far more maintainable.

How many times when you work on a website do you need to declare the value of a color in CSS? Usually as a hex (hexadecimal) value like #bfbfbf. 10 times? 20? However many it ends up being, I often (in fact usually) struggle to remember hex values, especially with 2-3 colors in a site. With Sass, we can just define the colors as variables. A variable is merely a mechanism for referencing a value. Take at look at these three variables:

$red: #ff0b13;
$blue: #091fff;
$green: #11c909;

.i-want-to-be-green {
  color: $green;
}

.i-want-to-be-green {
  color: #11c909;
}

RGBA (Red Green Blue Alpha) and HSLA (Hue Saturation Lightness Alpha) colors are supported increasingly in modern browsers. To provide a fallback for older browsers it's common to declare a hex color value first and then an RGBA or HSLA value for newer browsers (that way, new browsers use the RGBA/HSLA, while older ones use the solid hex value). To exemplify that technique, to enable a color with some alpha transparency, at present we might do this:

.color-me-bad {
  color: #11c909;
  color: rgba(17, 201, 9, 0.9);
}

If picking colors from a composite in a graphics application (Photoshop, Fireworks, and the like), it is not always simple to get both hex and RGBA values. Before Sass, I had a handy little application just for the job. Now, I am pleased to say that thanks to Sass, that application has gone the way of the Dodo. With Sass, it is possible to simply do this:

.color-me-good {
  color: $green;
  color: rgba($green, 0.9);
}

We're using an easy to remember variable name to represent the color and then using a color function of Sass to convert that color to RGBA. In the preceding example we are asking Sass to give the value of the color (defined as the $green variable) as an RGBA value with an alpha channel at 0.9. When compiled, it produces the following CSS code:

.color-me-good {
  color: #11c909;
  color: rgba(17, 201, 9, 0.9);
}

For those in the cheap seats not paying attention, Sass has automatically provided the color as an RGBA value. The alpha channel is at 90 percent. This means that we can see 10 percent of whatever is behind the color in browsers that understand RGBA.

I'm a big fan of CSS3. It lets us ditch images and do more things with pure CSS than ever before. However, implementing these new features (background gradients, box-shadows, transformations, and a few more), that are often still experimental features, often requires the use of vendor prefixes and occasionally different syntaxes. You know the drill. As an example, this is what historically has been needed for rounded corners:

 .rounded {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
 }

With Sass's authoring framework, Compass, we get heaps of free mixins (don't worry about what a mixin actually is, we'll get to that shortly). Instead of remembering prefixes and associated syntaxes, you can just write the following code:

.rounded {
  @include border-radius(4px);
}

And that would produce exactly the same CSS on compile; all of the vendor prefixes get automatically generated. It's a huge time saver.

Sass allows rules to be nested within one another. So for example, if you wanted to make a set of links with a nav element and provide alternative pseudo states for hover and active states, you could write this in Sass:

nav {
  a {
    color: $red;
    &:hover {
      color: $green;
    }
    &:visited {
      color: $blue;
    }
  }
}

We are putting the anchor links (the a tag) within the nav element and also nesting the hover tag and visited states within the a tag. This probably looks more complicated than it actually is. Here's how that compiles to CSS:

nav a {
  color: #ff0b13;
}
nav a:hover {
  color: #11c909;
}
nav a:visited {
  color: #091fff;
}

I like to do this on little self-contained modules of CSS as it keeps all the associated styles together, especially where pseudo classes (like :hover and :active) are needed.

#container .callout-area ul#callout-one li.callout-list a.callout-link {
  color: #bfbfbf;
}

.callout-link {
  color: #bfbfbf;
}

Unless there is a good reason not to, I believe all websites should be built responsively (cough, buy my book Responsive web design with HTML5 and CSS3). In CSS terms, this typically involves writing lots of media queries for the different breakpoints in a design. For example, to change the typography at a certain viewport/device width you might write this CSS:

@media only screen and (min-width: 280px) and (max-width: 479px) {
  .h1 {
    font-size: 1.1em;
  }
}
@media only screen and (min-width: 480px) and (max-width: 599px) {
  .h1 {
    font-size: 1em;
  }
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
  .h1 {
    font-size: 0.9em;
  }
}

That code sets a different font size on the h1 element depending upon the screen width in pixels. Personally, I think this is quite verbose and a lot to remember.

With Sass, instead, it is possible to do this:

h1 {
  @include MQ(XS) {
    font-size: 1.1em;
  }
  @include MQ(S) {
    font-size: 1em;
  }
  @include MQ(M) {
    font-size: 0.9em;
  }
}

A variable is defined for XS, S and M elsewhere (each is just a width value). The value of the variable is then used inside a mixin called MQ. Using that MQ mixin, media queries can be placed easily wherever they are needed, arguably making it simpler to understand where they are being applied in the code.

I've talked about some of the compelling features of Sass and Compass and not even mentioned @extend, placeholder styles, partial files, or image sprites; I hope you'll stick around for later chapters when we get into using them. In the meantime, as Columbo and Steve Jobs would say, 'Just one more thing…'.

How do you compress CSS before using it on a live site? Compressing the CSS makes it a fraction of its original size, resulting in faster code for every device that requests it. Compressing CSS can easily reduce the file size by half its original uncompressed size. Sure it's possible to copy and paste the CSS into an online compression tool, or perhaps your text editor has a built-in feature for the task, but Sass is better still. It just does it.

Sass can be configured to compile the CSS in a number of formats, one of which is compressed. So as soon as the Sass file is saved, it gets automatically compiled into compressed CSS; production ready and in the smallest possible file size. A time saver and something every user of the sites you build will benefit from, even if they don't know it.

So that's it; I've given you a few brief nuggets of what Sass and Compass can do. Next, let's get a handle on what Sass and Compass actually are and then we'll get up and running.

For those using Mac OS X, it is really simple to install Sass and Compass. Compass creator Chris Eppstein has created a graphical installer package. Just head to https://github.com/chriseppstein/compass/downloads, download the package, and run the latest installer.

However, understanding just a little about the command line will be beneficial, so you may opt to flex your command line muscles just a little and install from there.

dir

ls

cd..

cd ..

If you are on Windows, head over to http://rubyinstaller.org/downloads/, download, and install the latest Ruby installer file (for example, it will be a file link as follows, depending upon the current version: http://rubyforge.org/frs/download.php/76054/rubyinstaller-1.9.3-p194.exe). Just use the defaults (you don't need to put any tick boxes in the options). Linux users should be able to install Ruby direct from their package manager.

I'm assuming if you are running Linux you are savvy enough to understand what to do, if not, I'd suggest getting a Mac!

Now, regardless of the system (Windows/Linux/Mac), we have Ruby ready. We're going to use the Ruby gem command. Basically, we are just saying, "Ruby, install me the 'gem' called 'compass'". Compass actually requires Sass, so by installing Compass, Ruby will automatically install Sass too.

Those on OS X should open the Terminal application. It's typically located in the Applications | Utilities folder. Here's the Terminal application in my Finder:

Double-click on that and you'll see a window like the following screenshot:

In case you've never been here before, this is the command line! Now just type this and then press Enter:

sudo gem install compass

You will be prompted for your user password (it's the same one you use to log into your desktop). Just type it in and press Enter. Don't be alarmed when it seems that nothing is happening. When entering a password, the Terminal provides no feedback. With that done, Compass and Sass will install.

How about that, you just installed a Ruby gem. Do you feel like a nerd now? Don't worry, it'll be our little secret.

For Windows users using Windows 7 or Vista, just click on the Start button and type ruby, and then click on the highlighted Start Command Prompt with Ruby option. Those on Windows 8, from the Start screen, right-click, choose All apps, and then click on the Start Command Prompt with Ruby option.

The Command Prompt will now open as shown in the following screenshot:

Just type the following command and press Enter:

gem install compass

Compass and Sass will now install, and when finished you will be presented with another Command Prompt (a blinking cursor).

There, that's all there is to it. Sass and Compass are installed; you can now start writing Sass and Compass files.

As new features get added to Sass and Compass from time to time, it's worth knowing how to check your current version and install the latest versions. Check the current version of Sass from the command line with the following command:

sass –v

You will see a response, something like Sass 3.2.5 (Media Mark).

To check the current version of compass, run the following command:

compass –v

You will get a response on the command line such as Compass 0.12.2 (Alnilam).

Of course, it's possible to check the websites of Sass and Compass to find out which versions of each are available, but this can also be done from the command line. Just run the following command:

gem list sass –a –r

We are just asking Ruby to list the versions of all the gems that have sass in their name. The -r part of the command is asking Ruby to check remotely (for example, on the Internet as opposed to on your own system) and the -a part is just asking Ruby to list all the versions. Here's the same command for Compass:

gem list compass –a –r

With either of those commands, you'll get a list of all the gems that contain the word Sass or Compass respectively, with the version numbers listed in brackets. For example:

sass (3.2.0, 3.1.21, 3.1.20, 3.1.19, 3.1.18, 3.1.17, 3.1.16, 3.1.15, 3.1.14, 3.1.13, 3.1.12, 3.1.11, 3.1.10, 3.1.9, 3.1.8, 3.1.7, 3.1.6, 3.1.5, 3.1.4, 3.1.3, 3.1.2, 3.1.1, 3.1.0)

The versions are listed in reverse chronological order (latest first).

To check which prerelease versions are available, the command is:

gem list sass --pre -r

To check which prerelease versions of Compass are available, the command is as follows:

gem list compass --pre -r

To install the latest stable version of Sass, just run the following command (the sudo part may not be needed depending upon your system configuration):

sudo gem install sass

If a future version has something exciting you want to try out but it isn't yet a full stable release, you can install the latest prerelease version by running this command:

sudo gem install sass --pre

However, be aware that there may be bugs and inconsistencies with the latest version. So, unless you have a specific reason to do so, I'd recommend only using the stable versions.

It's the same style of command for Compass:

sudo gem install compass

And for the prerelease version:

sudo gem install compass –pre

gem uninstall sass --version versionnumber

Want to create a Sass and Compass project from the command line? This can be done by changing folders in the command line to where the site folder should be (for example, I tend to keep mine in a folder called Sites) and running this command:

compass create my-project

Hopefully that command is self-explanatory; we're just using Compass's built-in create command to make a project in the folder specified. For example, the my-project part is the name of the project folder that will be created. Compass then creates a number of files and folders. Following is an example of the resultant files in Windows:

To have Compass 'watch' the Sass files for changes (which are in the sass folder of the project) and automatically compile them into CSS on save, it's necessary to first browse to the folder that holds the Sass files being worked on (it may help to refer back to the Getting around on the command line tip box in the Install Sass and Compass section for the relevant commands). When at the root of the relevant folder (when listing the contents of the folder you are in, the config.rb file should be listed) run this command from the command line:

compass watch

This Compass command just says "Compass, watch this project, and if any Sass files change, recompile the CSS". Now, whenever the Sass files within are changed, Compass will automatically note any changes and recompile the equivalent CSS files (the CSS is compiled into the stylesheets folder of a Compass project by default).

Scout is a free Adobe Air-based application. It can be downloaded at http://mhs.github.com/scout-app. Once installed, run the application and click on the big plus button at the bottom left of the interface to add a project. It's still necessary to configure the settings, but once done the compile process will be automated. It's free, but personally I think it's worth investing a little money on one of the other solutions (described next) as they offer extra functionality that can soon pay for itself.

CodeKit is a Mac OS X only application (sorry Windows and Linux folks). It has a great, simple user interface and not only compiles Sass files (along with a bunch of other preprocessor languages), it also reloads the browser window as files are saved; a real timesaver when iterating over styles. It can also concatenate files and a whole lot more.

What is particularly nice about CodeKit is that it gives the option to create Compass projects directly from the interface. Just specify the preferences, choose a folder, and it does the rest (and then automatically watches the project for changes).

The full version is $25, but there's a free, time-limited trial, so take a look and see if it works for you: http://incident57.com/codekit/.

LiveReload is similar to CodeKit, in that alongside automatically compiling preprocessor languages such as Sass, it also automatically refreshes the browser window as changes to web-related files are made. Just press the plus icon at the bottom of the interface, browse to the project folder, and then tick the Compile SASS, LESS, Stylus, CoffeeScript and others option.

It costs $9.99 (available to OS X users through the App Store). Alongside the OS X version there is also a prerelease version available for Windows. Take a look at http://livereload.com.