SASS/SCSS: A beginner's guide


Ever since I picked up SASS, my outlook on front-end development changed.
I'm about to teach you how to get started with SASS, and how to start building awesome front-end code with it.
NB: For the purpose of this article, I will be using the SCSS bracket syntax.


Setting up your environment

Installing SASS

First of all, you're going to want to install SASS. Thankfully, this is extremely easy to do thanks to RubyGems: fire up your Command Line Interface (Terminal on Mac, Command Prompt on Windows), and type in gem install sass.

If it installed correctly, you should see something similar to the following when you type in sass -v:

$ sass -v
$ Sass 3.4.12 (Selective Steve)

Note: If you run into a "permission denied" error, try running sudo gem install sass instead.

Compilation 101

Now that you have SASS installed, you'll need to know how to compile your files. Browsers don't have the ability to parse SASS files on their own, yet, so they must be converted to CSS before being served. The SASS binary offers the opportunity to either compile files on the fly using sass input.scss output.css or to watch a file/folder for changes, using the syntax sass --watch input.scss:output.css, and sass --watch input_dir:output_dir respectively.

For the sake of this article, we're going to simply watch our files. However, in a real-world case you would be much better off using a task-runner such as Grunt or Gulp.


Compiling your files

So let's go ahead and create a file named style.scss and put the following code inside:

/* style.scss */
$font-size-base: 14px;
body {
  font-size: $font-size-base;
}

In your Command Line Interface (CLI), cd to the directory you created the file in and run sass style.scss style.css.

$ cd ~/www/sass
$ sass style.scss style.css

The compiler will automatically create your CSS file from your SCSS file. If all went well, it should contain the following code:

/* style.css */
body { font-size: 16px; }

Awesome, right? Notice how it took the value of $font-size-base and inserted it into the correct place. This is merely scratching the surface of what SASS can do.


Mathematical Functions

Floor

floor() will round any number down to the nearest whole number. Extremely useful for normalising numbers returned from division calculations.

Usage: $variable: floor(13.666656px);

Ceil

ceil() will do the exact opposite of floor: round any number up to the nearest whole number.

Usage: $variable: ceil(13.666656px);

Percentage

percentage() takes any decimal number and returns its percentage value. For example, percentage(1/3); will return 33%

Usage: $variable: ceil(13.666656px);


Colour Functions

RGB/ RGBA

Extremely useful for turning a hex colour into a RGB(A) value.

Usage: rgb(#fff);
Usage: rgba(#fff, 0.5);

Lighten / Darken

If you've ever used a tool like 0to255, you'll know how useful it is to be able to pick colours that are equally spaced apart. The lighten & darken functions allow you to do just this.

Usage: lighten(#000, 10%);
Usage: darken(#fff, 10%);


Partials

A partial is a file that contains a small chunk of code. If you are familiar at all with the principles behind DRY (Don't Repeat Yourself), this should be music to your ears, as a partial allows this chunk of code to be reused in multiple places in your codebase, requiring only one round of editing.

A partial's file name must be prefixed with an underscore, e.g. _partial.scss, and partials are not compiled as a stylesheet. To import a partial, use the @import directive, like so:

/* style.scss */
@import '_partial';


Mixins

Mixins are extremely useful when seeking to create code that is reusable and maintainable. If you're finding yourself using the same chunk of code repeatedly, chances are you would be better off writing a mixin.

A common use for a mixin is a notification, so let's use this as an example. Take this chunk of code:

Bad
/* _notifications.scss */
.notification-error {
  background: #f00;
  border: darken(#f00, 10%);
  border-radius: 4px;
  color: #fff;
  padding: 4px 8px;
}

.notification-success {
  background: #0f0;
  border: darken(#0f0, 10%);
  border-radius: 4px;
  color: #fff;
  padding: 4px 8px;
}

.notification-warning {
  background: #ff0;
  border: darken(#ff0, 10%);
  border-radius: 4px;
  color: #000;
  padding: 4px 8px;
}

This will quickly turn into a recipe for disaster when it comes to maintainability if you have plenty of classes, and there is a much better way of handling it.

Enter the notification mixin:

Good
/* _notifications.scss */
@mixin notification($background-color, $text-color) {
  background: $background-color;
  border: darken($background-color, 10%);
  border-radius: 4px;
  color: $text-color;
  padding: 4px 8px;
}

.notification-error { @include notification(#f00, #fff); }
.notification-success { @include notification(#0f0, #fff); }
.notification-warning { @include notification(#ff0, #000); }
About the author
Profile pic
Joe McKie is a professional freelance web developer/designer from Nottingham, UK with a specialty in large-scale web applications and SaaS products. When he's trying to work, he can often be found being crushed under the weight of his rather large "lap dog".