A first look at SASS

What is SASS

It’s a version of CSS that you use when writing stylesheets. It produces the same old CSS that you know and love (including the new funky stuff). The benefit is that it makes writing CSS a lot easier and adds a whole lot of clever functionality that most front-end devs would love to see: variables, simple maths operations, logic and more.

You can use it regardless of platform or type of website you are making. You can use it on MAC, PC and Linux, and use it when creating sites with WordPress, PHP, .Net, Ruby etc.

Why bother with SASS?

Over the last 18 months or so it feels like there has been something of a renaissance in web design. Even by the dizzying pace of change that you would expect on the web we have seen an huge increase in the number of things that webfolk need to have a handle on. I’m talking here about thinds like responsive design, mobile, web typography, UX, CSS3, HTML5, social, javascript/canvas/flash, content strategy, OOCSS, BEM method and more.

The level of sophistication and depth is increasing exponentially. So why bother to learn a new way to do something you already have a handle on? Thankfully SASS isn’t all new, it builds on the CSS you know and love but adds some useful functionality that is lacking in CSS.

Variables and colour functions

Wouldn’t it be nice just to set the brand colours up as variables at the top of your stylesheet? Then, rather trying to remembering the hex codes, or continually refer to a txt file or whatever you could just do something like this:

/* set up our colour variables */
$colour_primary: #ff0000;
$colour_accent: #00ff00;

Then later in the stylesheet you can call the variables. If the the brand colours change you now have a single point to change all of the colours in your stylesheets. So if we write this in our.scss stylesheet …

/* colour variables in use */
h1 { 
  color:  $colour_primary; 
}
h2, h3 { 
  color: darken($colour_primary, 10%) ; 
}
a { 
  color: #222; 
  background: $colour_accent; 
  border: darken($colour_accent, 20%) 1px solid; 
  display: inline-block; 
}

… it is output as this in our .css stylesheet

h1 {
  color: red; 
}
h2, h3 {
  color: #cc0000; 
}
a {
  color: #222;
  background: lime;
  border: #009900 1px solid;
  display: inline-block; 
}

SASS is the best thing since cold beer when it comes working with colours in CSS. We can darken and lighten colours to acheive tints and tones, we can add colours together, you can change the hue whilst retaining the same saturation and lightness. In fact there are tons of colour operations that we can perform. We can even work in nice colour representations like HSL as it is output as RGB hex values for old browsers.

We can use SASS to generate a colour scheme from a single colour in a similar fashion to the way colour wheel apps such as Kuler.

Analagous scheme with complementary accent

$colour_primary: #d94f00;
$colour_secondary: adjust-hue($colour_primary, 60deg );
$colour_tertiary: adjust-hue($colour_primary, 300deg );
$colour_accent: adjust-hue($colour_primary, 180deg );
 
.col-1 { color: $colour_primary  ; }
.col-2 { color: $colour_secondary; }
.col-3 { color: $colour_tertiary ; }
.col-x { color: $colour_accent   ; }

… is output as …

.col-1 { color: #d94f00; }
.col-2 { color: #8ad900; }
.col-3 { color: #d9008a; }
.col-x { color: #008ad9; }

It’s not the nicest colour scheme in the world, but the possibilities offered by such functions intrigue me.

Mixins

Mixins are like Javascript functions. They are little chunks of reusable code that we can call upon. A simple example would be the rounded corners example below. At present it is prudent to use the -webkit and -moz extentions when declaring a border radius. Typing the same rule multiple times can get a little tired though. However, once we set a mixin up, it is much easier to call it using a single line.

@mixin rounded($radius:4px) {
   border-radius: $radius;
   -moz-border-radius: $radius;
   -webkit-border-radius: $radius;
}
 
.module {
   @include rounded(10px 10px 0 0);
}
.bar {
   @include rounded();
}

Which is output to our CSS file as

.module {
   border-radius: 10px 10px 0 0;
   -moz-border-radius: 10px 10px 0 0;
   -webkit-border-radius: 10px 10px 0 0;
}
.bar {
   border-radius: 4px 4px 4px 4px ;
   -moz-border-radius: 4px 4px 4px 4px ;
   -webkit-border-radius: 4px 4px 4px 4px ;
}

… And there’s more

This really just scratches the surface of what is possible using SASS. Also worth looking at is @extend which allows you to inherit properties from other classes in your stylesheet in order to extend them.

If you like the look of SASS you should also check out LESS CSS. It is the same sort of thing and does not require you to have Ruby installed. Instead with LESS you can compile it at runtime with the standard LESS js (not suitable for production). There are also LESS compiler apps available that watch your LESS directory, and recompile the CSS when a change is saved.