Make CSS fun again with SASS!

19 4 / 2012

Make CSS fun again with SASS!

CSS is powerful, with few changes you can make your website look completely different. You can easily separate design from markup and create amazing designs. Although CSS is simple I used to have a hard time structuring my documents and I often ended up with lots of duplicated rules. That ended when I found SASS, which in my opinion is the biggest revolution of web development ever.

So, what is SASS?

Sass stands for “Syntactically Awesome Stylesheets” and comes in two flavors. SASS, the original format with indented syntax and SCSS which is CSS compatible. Since I’m an old school user I’ll focus on the SASS format in this article.

This quote comes from the official site and describes the purpose well:

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

Nice huh, but why would you use it?

Before I’ll show some examples I really hope to sell this so you so here are some benefits:

I’ve saved hundreds and hundreds of hours in the 3 - 4 years that I’ve used SASS.
I have never used the find and replace function in a CSS file since then.
I have never scrolled down a 10000 lines long file trying to find a specific rule.

import files

In SASS a file named style.sass would be compiled to a file called style.css. If you prepend the filename with an underscore the file won’t be compiled at all and you can include it within another file. This makes is easy to keep a logic structure of rules, for example:

@import 'reset'

@media only screen and (min-width: 768px)
  @import 'tablet'

@media only screen and (max-width: 480px)
  @import 'mobile'

The file above is named style.sass and includes all the rules in the file called _reset.sass. As mentioned before SASS uses syntactical whitespace and nesting so the rules within the file called _tablet.sass would only be applied inside the first media query. Sass will compile style.sass into a single file but you can structure the rules in as many files that you want.

Variables

You can use even use variables to define rules. This was the feature i missed the most while I was hacking CSS. Define colors, margins, paddings or anything else you want to be able to easily change.

$link_color: #007bc0

a:link, a:visted
  color: #{$link_color}

You can even perform calculations:

$link_hover_color: $link_color - #111

a:hover, a:active
  color: #{$link_hover_color}

This makes it very easy to change colors

Mixins

Mixins is a really powerful feature of SASS which makes it possible to reuse blocks of rules on any given selector. Are your tired of retyping the same vendor prefixes over and over again? I sure was. Check out this example:

@mixin border_radius($top, $right: '', $bottom: '', $left: '')
  @if $right == ''
    -moz-border-radius: #{$top}px #{$top}px #{$top}px #{$top}px
    -webkit-border-radius: #{$top}px #{$top}px #{$top}px #{$top}px
    border-radius: #{$top}px #{$top}px #{$top}px #{$top}px
  @else
    -moz-border-radius: #{$top}px #{$right}px #{$bottom}px #{$left}px
    -webkit-border-radius: #{$top}px #{$right}px #{$bottom}px #{$left}px
    border-radius: #{$top}px #{$right}px #{$bottom}px #{$left}px

This mixin defines a set of rules for any element. Use it like this:

#call-to-action
  @include border_radius(10px)

If you want different radius for different corners, then just add more arguments:

#call-to-action
  @include border_radius(10px, 4px, 16px, 12px)

Mixins makes it fun to try out new features of CSS since you can generate all the vendor prefixes dynamically, but it doesn’t stop there. Imagine the relief of removing all the duplication in a bloated CSS file.