CSS

What is SASS and why you should be using it

Quality of life tools for front end developers

Sean Hamlin

• 4 min read
What is SASS and why you should be using it

What is SASS?

SASS is the missing pieces you wish the CSS spec had, but does not. There are two versions in the wild at the moment:

  • .SCSS - (Sassy CSS) the new version, is a superset of CSS3 syntax. This means if you know how to write valid CSS, you can also write valid SCSS
  • .SASS - (the indented syntax) the older version, that makes use of indentation over brackets. It resembles Haml

All new projects should adopt the new syntax, but you may come across the old indented style syntax in older projects.

Why you should be using it

Variables

Sass allows you to declare variables that can be used throughout your stylesheet. Variables begin with $ and are declared just like properties. They can have any value that’s allowed for a CSS property, such as colors, numbers (with units), or text.

$main-color: #ce4dd6;
$style: solid;

#navbar {
  border-bottom: {
    color: $main-color;
    style: $style;
  }
}

a {
  color: $main-color;
  &:hover { border-bottom: $style 1px; }
}

Variables allow you to re-use colors, sizes, and other values without repeating yourself. This means that changes that should be small, such as tweaking the coloring or the sizing, can be done in one place, not all over the stylesheet

Functions

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#hsl_functions

Mixins

This is what CSS should have from the start. Mixins save you having to write duplicated code, by producing a manner in which code snippets can be re-used. This also mean when you need to alter your code, only one place is needed to be changed

Mixins allow for efficient and clean code repetitions, as well as easy alteration of code

Example use:

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

which produces:

.simple {
  -webkit-border-radius: 4px 4px;
  -moz-border-radius: 4px / 4px;
  -khtml-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
 }

Parent References

What about pseudoclasses, like :hover? There isn’t a space between them and their parent selector, but it’s still possible to nest them. You just need to use the Sass special character &. In a selector, & will be replaced verbatim with the parent selector.

a {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
}

@import

CSS has an implementation of this already, but it involves yet another HTTP request in order to get the included resource. SASS does this more like PHP in the sense it simply includes the contents of the remote file as if it was written in it's place. This means all resources declared in the imported SAS file are available in the current open SASS file.

Sass has a naming convention for files that are meant to be imported (called “partials”): they begin with an underscore. Let’s create a partial called _rounded.scss to hold our rounded mixin.

@import "base";
@import "rounded";

You can also import SASS files from within an imported SASS file, enabling you to architect your SASS to suit your needs

Extending SASS with Compass

Now that you know that SASS can be extended with functions, this provided the opportunity to write even further extensions to the core SASS framework. One such framework I have used is Compass.

Awesome things that Compass can do

Magic SASS compilation

There is a reason I have not told you how SASS natively compiles into CSS, there is indeed a way, but it involves you have to run a 'compile' command every time you want new CSS generated. Obviously this is less than ideal when in full development.

Compass helps us out here by providing a 'watch' command. You essentially run this command once, and every time you save a SASS file, Compass will trigger the compilation for you.

compass watch [path/to/project]

This will consume you terminal, so either run it in another terminal tab, or background the process

nohup compass watch [path/to/project] > /tmp/compass.log &

CSS image sprite generation

http://compass-style.org/reference/compass/helpers/sprites/

$icons: sprite-map("icons/*.png"); // contains icons/new.png among others.
background: sprite($icons, new) no-repeat;

Example use:

$icons: sprite-map("icons/*.png"); // contains icons/new.png among others. background: sprite($icons, new) no-repeat;

Which produces:

background: url('/images/icons.png?12345678') 0 -24px no-repeat;

You can adjust the background relative to this position by passing values for $offset-x and $offset-y:

background-position: sprite-position($icons, new, 3px, -2px);

Would change the above output to:

background-position: 3px -36px;

Generation of production CSS

So it has no comments, new lines etc. Great if the web framework you are using is not so good at doing this.

You may want to kick this off by hand

compass compile -e production --force

CSS3 mixins

This takes away most of the pain of working proprietary browser vendor extensions in CSS3. What should be simple tasks in code, instead end up being bloated, often repeated many times in the same stylesheet. Here is a simple example:

CSS3 version

div {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

Compass has all of these CSS3 mixins ready, so there is no need to think about it

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

The way it supposed to if you ask me. Well it should have been in CSS in the first place. Luckily, SASS and Compass fix these problems for us.

Extending SASS with Sassy buttons

http://jaredhardy.com/sassy-buttons/

Installation

gem install sassy-buttons

How to use it

You first need to import the library through:

# Edit the project configuration file and add:
require 'sassy-buttons'
@import "sassy-buttons"

Now you can use the mixins provided

.red { @include sassy-button-gradient("matte", #e86a43); }
.blue { @include sassy-button-gradient("simple", #4d8ccd); }
.green { @include sassy-button-gradient("glass", #8cbe5f); }

With literally one line of SASS you can now produce very complex CSS3 based buttons that resemble

Further reading

A nice presentation that goes into the functionality of SASS and Compass by Brandon Mathis can be found here: http://speakerdeck.com/u/imathis/p/sass-compass-the-future-of-stylesheets-now. It’s really worth the skipping through.

Conclusion

There is a lot to say about SASS and Compass, and there is a lot more to Compass than explained in this post.

Using these compilers will save you a lot of work and make coding CSS fun again. Better syntax, managed code, dynamic parts, it’s all better now.

I hope to have convinced you into using SASS and Compass. Tell me what you think in the comments.

Sign up for more like this.

Enter your email
Subscribe