Getting Started with Sass

28th October 2016

This article will help you assist you in getting started with Sass including installation, basic commands and a few examples.

Sass, or syntactically awesome stylesheets, is an extension of CSS which can allow you to use things like variables, nested rules and much more.

As some of the features that the Sass extension provides are not recognised by the browser, your preprocessed Sass file will be taken and saved as a normal CSS file that you can use in your web site.

To install sass via command line. You have several options.

Windows

To get Ruby on your Windows computer, use the Ruby Installer found here: http://rubyinstaller.org/

Linux

You’ll need to install Ruby first which you can do so here: https://www.ruby-lang.org/en/documentation/installation/.

Afterwards, you can then install Sass.

$ sudo su -c "gem install sass"

Mac

No installer is required. Simply run the following:

sudo gem install sass

You can check the version of Sass you have installed by running the following command.

sass -v

A simple Sass file might look like the following.

// main.scss
$primaryColor: #000;

body {
    background: $primaryColor;
}

.container {
    margin-bottom: 30px;

    .sub {
        margin-bottom: 0;
    }
}

As mentioned, the web browser can’t interpret

So to compile the Sass file into a CSS file, run the following.

$ sass main.scss main.css

We then get

// main.css
body {
  background: #000; }

.container {
  margin-bottom: 30px; }
  .container .sub {
    margin-bottom: 0; }

/*# sourceMappingURL=main.css.map */

That’s great. But what if we’re constantly updating the main.scss file? Do we have to keep running the sass command?

Sass gives you the ability to add to watch folders or directories with the –watch flag.

$ sass --watch /your/css/directory

Now when you update the main.scss file, the main.css file will also update automatically!

To help keep your CSS maintainable, Sass will take the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.

This can be done using the @import option.

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
   padding: 0;
}

// main.scss

@import 'reset';

.container {
    margin-bottom: 30px;

    .sub {
        margin-bottom: 0;
    }
}

When generating the CSS, you’ll get a CSS file containing the combined .scss files.

So there are the basics. Future articles will cover more information on variables, nesting, mixins and more, but for now, enjoy writing CSS more quickly and efficiently with this great preprocessor.