What is SASS?

In the olden days, people used to write CSS by hand. This had a number of problems, namely:

  • For performance (reducing HTTP requests) all the CSS needs to be in one file
  • To speed things up (reduce bandwidth) CSS needs to be manually minified
  • Keeping things DRY is very hard, if not impossible
  • Browser compatibility causes duplication, both for vendor prefixes (a necessary evil) as well as providing commmon fallbacks

If you are thinking that you could simply concatenate all your CSS together, replace variables with sed, then minify it, then you are thinking along the same lines as Hampton Catlin, Nathan Weizenbaum and Chris Eppstein - the developers of SASS.

I can safely say that I will never write vanilla CSS ever again.

SASS runs on your development machine and turns .scss files into .css. You then upload the .css files to the server, and use them as usual. This is nice as it makes moving to and from SASS very easy - if you decided to stop using SASS, you could just use the generated .css and forget about the .scss. The other benefit is that .css is valid .scss, making it trivial to start using.

It's worth pointing out that though SASS is written in ruby, ruby doesn't need to be running on your server, only on your local machine. For most people, you'll find ruby is built in to your machine, but if you are using Windows you'll need to install ruby first.

What does SASS do?

In short, SASS provides some new functionality: variables, nesting, mixins as well as a number of convienience features. Here's quick walkthrough of how a project might look like.

Getting started

As a quick example of what a project might look like, make a folder somewhere called css. In there make a file called style.scss, and one called _constants.scss. The underscore means that SASS won't compile it into a new CSS file of it's own. In SASS this is called a 'partial'.

Edit the files so they look like this:

// _constants.scss

$brand-color: rgb(255,0,0);
$accent-color: darken($brand-color, 10); // That is, 10% darker than the brand-color.
$body-font: "Helvetica Neue", Arial, sans-serif;
$header-font: "Segoe UI", "Myriad Pro", $body-font;
$width: 960px;
// style.scss (// don't appear in the outputed CSS, whereas /* */ do.)

@import 'constants';

body {
    font-family: $body-font;
    width: $width - 2 * 10px;
    padding:10px;
}

h1,h2,h3,h4 {
    font-family: $header-font;
}

h1 {
    color:$brand-color;
}

section {
    h1 {
        color:$accent-color;
    }
}

Once you have this set up, go to the folder that your css folder is in, and run

sass --style extended --watch css:css

in your shell. There are also loads of apps to do this for you if you can't type into command lines. For example CodeKit looks brilliant for OSX.

For production use, you'll want to change extended to compressed - this strips all the linebreaks.

This command causes SASS to sit and watch all your .scss files in your css folder, and compile then into .css files in the same folder. This likely fits what you want to do. You can now just save your .scss files, and the .css file will be updated. If you mess something up, SASS will show a load of errors so you can see what went wrong with your syntax. In your webpage, you'd just link to the style.css file it creates as if you had written it yourself.

SASS will pretty much instantly produce your style.css file. From this code it looks like this:

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  width: 940px;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: "Segoe UI", "Myriad Pro", "Helvetica Neue", Arial, sans-serif; }

h1 {
  color: red; }

section h1 {
  color: #cc0000; }

There are a number of things to notice here. Firstly, this is just one CSS file, being produced from two. Secondly, my variables have been filled in with the appropriate values. You'll notice that SASS has changed the rgb(255,0,0) value into 'red'. That was nice of it. I can now use rgb and hsl wherever I like, whilst guaranteeing that it will work in all browsers. I also wanted a darker version of that color. That doesn't have a name shorter than 7 characters, so it's simply outputted as #cc0000. Thirdly, SASS has flattened my nested statement into two statements, and finally, the calculation I put in has been evaluated.

In all, these features are pretty lovely, and you are likely impressed already… That means it's time to…

Kick it up a notch!

While being able to do all that is cool, there are a load of other things SASS can do. Let's start with another example. If you are following along at home, replace the contents of style.scss with the following…

// style.scss

@mixin gradient($from, $to, $height, $pie:"false") {
    background-color: $to;

    background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
    background-image: -webkit-linear-gradient($from, $to);
    background-image: -moz-linear-gradient($from, $to);
    background-image: -o-linear-gradient($from, $to);
    background-image: -ms-linear-gradient($from, $to);
    background-image: linear-gradient($from, $to);

    @if $pie == "true" {
        // For CSS3PIE
        -pie-background: linear-gradient(90deg, $from,$to);
    }

    background-repeat: repeat-x;

    -webkit-background-size: 100% $height;
    -moz-background-size: 100% $height;
    -o-background-size: 100% $height;
    background-size: 100% $height;
}

.gradient {
    @include gradient(hsl(0, 80%, 50%), hsl(120, 80%, 50%), 30px);
}

.div1 {
    @extend .gradient;
    color:white;
}

.div2 {
    @extend .gradient;
    color: blue;
}

This compiles to:

.gradient, .div1, .div2 {
  background-color: #19e619;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e61919), to(#19e619));
  background-image: -webkit-linear-gradient(#e61919, #19e619);
  background-image: -moz-linear-gradient(#e61919, #19e619);
  background-image: -o-linear-gradient(#e61919, #19e619);
  background-image: -ms-linear-gradient(#e61919, #19e619);
  background-image: linear-gradient(#e61919, #19e619);
  background-repeat: repeat-x;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -o-background-size: 100% 30px;
  background-size: 100% 30px; }

.div1 {
  color: white; }

.div2 {
  color: blue; }

There are two main things here - mixins and extend. Mixins are essentially snippets of CSS that can have parameters. The one I have here is one I wrote to include CSS gradients that are cross browser compatible. It takes four parameters, with the last one for using CSS3PIE turned off by default (I have never had much luck and generally use a png of the gradient generated in PHP on the fly instead for old browsers).

Below that, I made a class definition with a gradient. That is going to produce loads of code, so ideally I only want that in my CSS once. Below I have two divs that have the same gradient. By using @extend, I can give them that gradient without having to repeat the gradient. I could do that in normal CSS by hand, but this lets me keep things logically arranged without much hassle. When the syntax changed from the first gradient declaration here, I was able to change my mixin once, then deploy all my sites which have a symlinked file with my mixins in, meaning I could keep up with experimental syntax on multiple client sites without any hassle.

This is just scratching the surface - SASS also has loops, loads of useful functions, such as darken, demoed above, and many other features. Chris Eppstein has also created Compass, essentially a collection of awesome mixins that supplement SASS - meaning that you can dive straight in to a new world where CSS is fun again!

Use SASS? Written an article about it? Comments are below!

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

avenue-origin