Sass, or Syntactically Awesome StyleSheets, is a CSS interpreter. It lets you use advanced programming features in your Stylesheets, such as conditionals, functions, math, and other things, to aid in writing large, complex stylesheets. Sass can help tremendously when writing both advanced (CSS3) stylesheets, and even basic projects.

Using pre-existing css

One of the benefits of using Sass is that you can use your existing stylesheets, without having to rewrite them. If you just put your stylesheet into sass, and tell it to output again, you will get the same stylesheet on the other side. This has a large advantage over some other interpreters, that force you to rewrite everything.

Updating CSS3 easily

I have a fairly decent sized stylesheet for this site. Not the longest in the world, but nothing to sneeze at. The stylesheet has a lot of CSS3 properties, such as border-radius. In the past updating them to be cross-browser compatible has been a chore, involving many greps, and lots of manual entry.

With Sass, I wrote out a simple function at the top of my stylesheet.

@mixin rounded($side: all, $radius:8px) {
	@if $side == all {
		-webkit-border-radius: $radius;
		-moz-border-radius: $radius;
		border-radius: $radius;
	}
	@else {
		-webkit-border-#{$side}-radius: $radius;
		-moz-border-radius-#{$side}: $radius;
		border-#{$side}-radius: $radius;
	}
}

This is a good example to start with. It shows basic mixin functionality, as well as a bit of programming. Since i wanted a single rounded property i can use for many different things, I needed a bit of programming. The if/else block detects if there is any setting for the $side variable. If there is, it uses the setting, otherwise, it doesn’t use it. Then it simply uses a bit of code that you should recognize, its the cross-browser way of implementing Rounded corners.

Whenever I want to use a rounded corner, I type the following into a css block:

#search input {
	border: 1px solid hsl(0,0%, 80%);
	height: 20px;
	margin: 25px 0px 0px;
	padding: 0px 5px;
	width: 250px;
	@include rounded(all,20px);
	-webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;
	@include shadow("0px -1px  1px hsla(0,0%,0%,.5), 0px 1px 1px hsla(0,0%,100%,.9)");
}

The all tells it to round every corner, the 20px is the radius. This is expanded to:

#search input {
  border: 1px solid #cccccc;
  height: 20px;
  margin: 25px 0px 0px;
  padding: 0px 5px;
  width: 250px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-box-shadow: 0px -1px  1px hsla(0,0%,0%,.5), 0px 1px 1px hsla(0,0%,100%,.9);
  -moz-box-shadow: 0px -1px  1px hsla(0,0%,0%,.5), 0px 1px 1px hsla(0,0%,100%,.9);
  box-shadow: 0px -1px  1px hsla(0,0%,0%,.5), 0px 1px 1px hsla(0,0%,100%,.9); }

Nice and clean. Should some new browser/rendering engine take off, with its own vendor prefix, you only have to update one line (at the top of the document) instead of thousands).

If you look carefully at the code above, you should also notice that the color of the border was converted from HSL to HEX codes. This is yet another feature of SASS. There is a whole chapter in the manual¹ relating to color codes, and how they are interpreted, but lets just say this. This can save you so much time in writing a stylesheet. You can mix, match, and do whatever you please with colors, and get the perfect result back. If you prefer writing in HSL colors, like I do, you can write in HSL, and never have to go back and fix it for IE.

Writing new

So lets say you choose to write a new stylesheet, using nothing but SASS. I have yet to do this, but the prospect sounds most enjoyable. The first thing I would probably do is set up a series of Variables, Mixins, and other bits of repetitive code you plan on reusing. Set up useful functions for round corners, drop shadows, and other common features.

Use the @warn feature² to save time, write in-document todo lists, and other useful things. You get warnings at compile time, so there really is nothing to lose by doing this. This is one trick programmers have been using for years, and it really is useful to come into CSS.

I would recommend reading over the whole manual, there are some pretty useful nesting features that can make writing repetitive code very very easy. The manual can be found here.

Optimizing your CSS

Even if you don’t want to use the features of sass to make your css editing experience easier, you can use it to optimize your site. SASS comes with a built-in CSS compressor, that can shave precious byetes off a site download.

Using the compressor is fairly simple. At a command line, type sass --style compressed style.scss style.css, and presto, you have yourself a compressed stylesheet. There are other style formats you can use too, such as expanded (helpful for debugging).

Read over stylesheet styles (redundant) here.

Closing

SASS is a tremendous boon to CSS writers everywhere, it is fast, easy to use, and doesn’t require you to relearn everything you ever knew. Its fairly simple to install, and can easily be integrated into existing applications.

• Sass

1. You can find that chapter here [↩]
2. @warn manual [↩]