# Sass: Syntactically Awesome Stylesheets

Published
Tags:

Sass stands for Syntactically Awesome Stylesheets, yes, I’m quite a fan of the name. It provides us with a much simpler and more elegant way of defining CSS, allowing the creation of more modular and manageable stylesheets. Sass has two flavours; Sass-style and SCSS-style, the basic difference being that Sass-style uses indentation to separate code-blocks instead of curly braces. The examples used in this post will be using the SCSS-style.

Several years ago, I was playing around with CSS thinking how great it would be if CSS was able to define variables. The help it would be just having the ability to define the colours of a site so you don’t have random hex values peppered throughout your stylesheet would be huge. This problem is what instantly drew me to Sass.

## Variables

Magic numbers and strings are bad, giving those random values names is good. Defining a variable is similar to defining a CSS rule only the rule name starts with a dollar sign. You then use these by putting the variable where you want the value represented:

$page-width:970px;$theme-color-1:#A34;

.wrapper {
width: $page-width;$vertical-border: solid 2px $theme-color-1; border-left:$vertical-border;
border-right: $vertical-border; }  .wrapper { width: 970px; border-left: solid 2px #aa3344; border-right: solid 2px #aa3344; }  ## Mixins Mixins are Sass’ word for functions, you define a mixin and then include it within a selector. One mixin I’ve found particularly useful defines an inline-block that contains the hack to make it work correctly in IE6. @mixin inline-block-xbrowser { display: inline-block; zoom: 1; *display: inline; } nav#top-menu li { @include inline-block-xbrowser; }  nav#top-menu li { display: inline-block; zoom: 1; *display: inline; }  Mixins can also have arguments and optional arguments. @mixin styled-box($border-size, $border-style: solid) { border:$border-style $border-size #000; background: #CCC; } button { @include styled-box(2px); } code { @include styled-box(1px, dotted); }  button { border: solid 2px black; background: #CCC; } code { border: dotted 1px black; background: #CCC; }  ## Importing stylesheets Sass includes an @import directive which allows you to include all contents of a different Sass file into the one using the directive. This allows us to quite easily have a single HTTP request for all styles in the site by including all styles into a single file. Using this feature you can create a nice modular infrastructure for your website. /* _sizes.scss */$header-height:60px;

/* main.scss */
@import "base\_sizes";

.wrapper {

## Alternatives

The primary alternative to Sass is LESS. I instantly gravitated more towards Sass due to its syntax being much more similar to regular CSS.