Why SASS and the basics of using it

By -

For a long time writing CSS was an everyday task for front end web developers around the world and to everyone it was a long, convoluted task at that as there was only so much that you could accomplish using vanilla CSS. In 2006 some great minds at  sass-lang.com created a powerful pre-processor that changed forever the way developers write CSS for websites.

So why should we even use it?

CSS by itself allows us to create unique, eloquent and eye consuming websites but the code we leave hidden from everyday users may not be easy to maintain and alter in future updates, with SASS we can make it more apparent as to where bits of code live rather than splitting it all into separate CSS files and making our own worst nightmare.

With the power of SASS we have the following and lots more at our finger tips.

  • Variables
  • Functions
  • Mixins
  • Placeholders

What about LESS, doesn’t it do that too?

Well yes it does but SASS has it down to an art now, LESS however has limitations such as placeholders which SASS recently introduced as it’s own syntax to remove the overhead of extra CSS been introduced during the compilation phase. While you may say that’s a minor difference you would be right but again SASS offers a huge range of features that LESS still has yet to pick up and take on. At this point in time if you need a powerful compiler with more functionality you should choose SASS.

How do I install and use it?

Head over to http://sass-lang.com/install, the SASS team has plenty of information about 3rd party software and a small guide for installing the Ruby gem if you enjoy command line, since I’m a fan of CLI I will quickly go through the Ruby gem install and show you how to get going on Windows.

If you are on a Unix based system such as Mac OS X which comes with Ruby by default you can simply type the following command in a terminal window.

gem install sass
If you get a permission error simply run the command as sudo, once you have SASS installed you should be able to run the following.

sass -v
If you see something along the lines of Sass 3.3.8 (Maptastic Maple) then you have correctly install SASS on your system.

Windows install instructions

Firstly you will need to visit the Ruby downloads site to get the latest version which at the time of this article is 2.0.0-p481, once you have Ruby installed you may need to restart your PC, to check if you do open a command line window which you can do by searching for cmd via the start menu on via metro if you’re on Windows 8. Next type the following command.

ruby -v
If you get a command not found error restart your PC and you should be good to go, next type the same commands as above and you too should be ready to start writing some SASS.

So how do I write SASS and compile it?

Before I tell you how I’ll let you in on a secret which scared me away from SASS when I first heard about it and that was the indentation syntax it required, well that’s no more now days as you can write SASS using subset syntax called SCSS which is built directly into the compiler so you can continue using brackets without confusing yourself.

To get started create a new folder on your desktop for instance and inside that create a file called styles.scss, next point your terminal or command line window to that directory and type the following command.

sass styles.scss styles.css
Now in the same folder you should have a compiled CSS file with nothing in it, so lets start writing some SASS shall we, in your SCSS file add the following code.

$background-color: #000;

body {
    background-color: $background-color;
}

Now run the same command as before and in your compiled CSS file you should end up with something like the following.

body {
    background-color: #000;
}

What about nested selectors?

Say for instance you want 2 classes to share the same child selectors, well we can simply wrap them in both parent class selectors and the output will give us something that would otherwise be a pain to write by hand.

.square,
.circle {
    img {
        display: block;
        height: 100px;
        width: 100px;
    }

    a {
        display: block;
        font-size: 20px;
    }
}

This will produce something like the following.

.square img, .circle img {
    display: block;
    height: 100px;
    width: 100px;
}
.square a, .circle a {
    display: block;
    font-size: 20px;
}

Kind of boring right? Well you just made your first step in becoming a great web developer, but one question you may have is why do I have to run the same command every time I want to compile my SCSS file? Well there is a solution for that which is built into SASS already and it’s called the –watch command. To use this on our basic SCSS file we can use the following.

sass --watch styles.scss:styles.css
The main difference as you can see is that we use colon to separate the input and output files unlike the straight compilation which uses a space instead, this is purely the design of the command itself so you will need to keep that in mind. If at any point in time you want to stop the watcher press the Crtl + C keys on your keyboard and then type Y if it asks you.

You can find a lot more information about the SASS compiler at http://sass-lang.com/documentation/file.SASS_REFERENCE.html.

I have the basic concept, what’s next?

There are plenty of other cool features built into SASS such as mixins to make your code neater but if you don’t feel like writing all of your favorites out for each project or need more in-depth color functions then you may want to look into Compass which is a wrapper for SASS that provides a huge array of extra functionality along with a sprite system that allows you to generate a single image from many smaller images.

Apart from that I feel my brain has done it’s job and wont hurt yours anymore than it has been so thanks for reading and hope you enjoyed this introduction into SASS.

Chris is a developer from Melbourne, Australia, he likes to mess around with servers, build websites using HTML, JavaScript, SASS and more. He has been in the web development game for around 5 years now and enjoys learning while helping others learn on the web.

Leave a Reply

Your email address will not be published. Required fields are marked *