Super fast SASS setup

If you've written more than 10 lines of CSS, you could've written less with SASS.

SASS stands for Syntactically Awesome Style Sheets; Funny name but serious benefits. Anyone who's written CSS will probably loathe the endless repetition. Does this look familiar?

.class{
    color: #cccccc;
}
.class ul{
    list-style-type: none;
}
.class ul li{
    color: #cccccc;
}
                

Wouldn't it be sweet to put some variables in there? Declare things once, that way we don't have to type it over and over and if we need to change in the future we can do it in one place ( because clients never change their mind do they? :P )

How about this?

$color-primary : #cccccc;
.class{
    color: $color-primary;
    ul{
        list-style-type: none;
        li{
            color: $color-primary;
        }
    }
}
                

Lets go crazy up in here. Vendor prefixes? Pesky little backwards compatibility pains. Here's what a background linear gradient used to look like:

.class{
    background: #ff3236;
    background: -moz-linear-gradient(top,  #ff3236 0%, #ff8989 100%);
    background: -webkit-linear-gradient(top,  #ff3236 0%,#ff8989 100%);
    background: linear-gradient(to bottom,  #ff3236 0%,#ff8989 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3236', endColorstr='#ff8989',GradientType=0 );
}
                

Imagine having to copy and paste that thirty times for thirty different classes. If we use a 'mixin' then we can speed things up.

With SASS:

@mixin linear-gradient($start, $end) {
    background: $start;
    background: -moz-linear-gradient(top,  $start 0%, $end 100%);
    background: -webkit-linear-gradient(top,  $start 0%,$end 100%);
    background: linear-gradient(to bottom,  $start 0%,$end 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start}', endColorstr='#{$end}',GradientType=0 );
}

.class{
    @include linear-gradient(#ff3236, #ff8989);
}
                

Cross browser compatibility: Check. Graceful degradation: Check. Fingers not aching: Check.

I should state, even though this is only scratching the surface of what SASS can do, there are some escape characters and other groovy things going on in there that you might not understand. Always best to do your own reading

So how do we get this glorious thing in our lives?

SASS is written in .scss files, then compiled to create your .css files. So you will need something to compile these for you to get the benefits.

There are lots of ways to do this, task runners like Grunt.js, in PHP and a few others.

This is just the quickest way I've found to get up and running on windows (sorry mac/linux people) with little required experience to start playing with SASS. Feel free to experiment and find your own path.

I've done so using ruby and compass, read on.

  1. Install ruby on your machine using the windows installer
  2. Start your command line
  3. Install the compass gem:
    gem install compass
  4. Navigate to where you want to put your new project folder. If the command line is new to you here's all you need for now: change directory = cd DIRECTORYNAME | view current directory = dir
  5. Create the new project:
    compass create PROJECT-NAME
  6. Enter the project directory and run:
    compass watch
  7. Profit. Now when you make changes to the SASS files it should output your CSS ready to go.

Contact Us

Drop us a line!