SASS – You should be using it!

Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page

What is SASS? SASS stands for Syntactically Awesome Stylesheets. In a simple and short explanation, SASS is somewhere between a short-hand and programming-like language for CSS.

Quick Install

First step is to install Ruby. If you are working on an OS X, then you already have ruby, but I recommend installing RVM. RVM is Ruby Version Manager, it makes downloading and installing different versions of Ruby easy. Also it keeps them completely seperated from one another. Follow the instructions carefully and we’ll move on. It’s ok, I’ll wait…

If you have Ruby and RubyGems installed then the rest is easy.

$ gem install sass

Once you have installed the gem then you want to make your first SASS file. Create a ‘.scss’ file, either using vim in your terminal or a text editor and save it with the extension ‘.scss’. I like to keep the same file structure for my css/sass files:

  web-root/
    stylesheets/
      base.css
      sass/
        base.scss
  	mixins.scss
    javascripts/
    index.html

However you structure your websites, I would recommend that you create the sass/ directory inside your stylesheets directory, whatever you name it.

Then to start the daemon to watch for changes to your ‘.scss’ files simply run: (from within your web-root)

$ sass --watch stylesheets/sass:stylesheets

Now everytime you save a file inside the sass/ directory it will compile the ‘.css’ file within your stylesheets/ directory.

Nesting

SASS allows for nesting of selectors within others. So where straight CSS you would see:

  body {
    font-size: 65%;
    background: #333;
    color: #fff;
  }
    body header { background: #666; }
      body header h1 { color: #900; font-size: 2em; }

In SASS you can organize this and cut out a bunch of your repeat selectors:

  body {
    font-size: 65%;
    background: #333;
    color: #fff;
    header {
      background: #666;
      h1 {
        color: #900;
        font-size: 2em;
      }
    }
  }

With SASS you no longer need to repeat ‘body’ throughout the stylesheet. Now I understand in this example you most likely wouldn’t need to declare ‘body header h1′ but this is a simple example.

A better example (and one that I use often) is specific styles for similar selectors on different pages. For example, I generally, using PHP or Ruby variables add an id with the page name onto the body tag. This allows me have different styles on the same HTML structure for each page.

  <body id="">
    <h1>Hello World</h1>
  </body>
  //---base.scss--//
  /*------- Home Page ---------*/
  body#home {
    header {
      background: #333;
      height: 25em;
      h1 { color: #900; font-size: 2.1em; }
    }
  }
  /*------- About Page ---------*/
  body#about {
    header {
      background: #000
      height: 25em;
      h1 { color: #fff; font-size: 1.8em; }
    }
  }

With this type of structure you can easily seperate page specific styles and also the styles for #home h1 will never conflict with your #about h1 styles.

Variables and Mixins

Another great feature of SASS is the abiltiy to declare variables and mixins.

Variables are rather easy to understand if you have had any experience with PHP, Ruby, ASP or Javascript. The idea is that you set a ‘name’ for a specific value that can be called else where over and over again. A lot of the time variables are calculated values which can be done in SASS, but I use variables mostly for declaring repeated colors or styles.

Variables are declared similarly to variables in PHP. You start the variable with the ‘$’ and then use ‘:’ followed by the value.

  $my-color: #900;
  $my-bg: background: #333 url(/images/bob.png) no-repeat left top;

Mixins are a bit more complex but are so much more powerful.

Mixins are declared set of styles that can be included as many times as you need. A mixin is declared using ‘@mixin {
}’ and then a mixin is included by using ‘@include ‘ within your regular styles. Let’s take a look:

  @mixin button-style {
    border: 1px solid #000;
    background: #444;
    color: #fff;
    border-radius: 10px;
  }
  
  a.button {
  	display: block;
  	width: 25em;
  	height: 3em;
  	@include button-style;
  }
  
  input[type=submit] {
    width: 20em;
    @include button-style;
  }

This will generate the following CSS:

  a.button {
  	display: block;
  	width: 25em;
  	height: 3em;
  	border: 1px solid #000;
    background: #444;
    color: #fff;
    border-radius: 10px;
  }
  
  input[type=submit] {
    width: 20em;
    border: 1px solid #000;
    background: #444;
    color: #fff;
    border-radius: 10px;
  }

In this simple example you have just re-used the same code twice without having to declare a common class to add to both these HTML elements.

But Wait! There’s more! Mixins have this amazing feature that allows you to pass arguements to them. I use this to declare CSS3 styles that require browser specific flags, like box-shadow or gradients.

  @mixin box-shadow($x, $y, $blur, $color: #000) {
    box-shadow: $x $y $blur $color;
    -webkit-box-shadow: $x $y $blur $color;
    -moz-box-shadow: $x $y $blur $color;
    -o-box-shadow: $x $y $blur $color;
    -ms-box-shadow: $x $y $blur $color;
  }
  
  @mixin gr-two-color($c1, $c2, $p1: 0%, $p2: 100%, $start: null) {
    background: -moz-linear-gradient($start, $c1 $p1, $c2 $p2);
    background: -webkit-linear-gradient($start, $c1 $p1, $c2 $p2);
    background: -o-linear-gradient($start, $c1 $p1, $c2 $p2);
    background: -ms-linear-gradient($start, $c1 $p1, $c2 $p2);
    background: linear-gradient($start,$c1 $p1, $c2 $p2);
    @if $start == top {
      background: -webkit-gradient(linear, left top, left bottom, color-stop($p1,$c1), color-stop($p2,$c2));
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$c1', endColorstr='$c2',GradientType=0 );
    } @else {
      background: -webkit-gradient(linear, left top, right bottom, color-stop($p1,$c1), color-stop($p2,$c2));
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$c1', endColorstr='$c2',GradientType=1 );
    }
  }

You may have noticed two things in the code above that I have not mentioned. First is that you can set a default value for arguements not passed to the @mixin. If you program at all, you know that this can be super useful.

Secondly you will see an ‘if/else’ statement within the gr-two-color mixin. If/Else are declared using the ‘@if’ and ‘@else’ with open and close ‘{‘.

A good practice is to start by creating a mixins.scss file and including it into your main scss file.

  @import 'mixins';
Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page