SASS for Beginners: Introduction

An Introduction to SASS – for beginners

SASS: CSS with super powers

SASS stands for “Syntactically Awesome StyleSheets“. It is a very powerful CSS extension language, meaning it adds more features to CSS that it originally does not have. The syntax is very similar as well, In fact all valid CSS is valid SASS.

Wait, can Browsers Process and Render SASS?
Well, no. They can’t, but SASS has a pre-processor that converts your awesome SASS stylesheets to simple(but awesome) CSS stylesheets.

Many, modern front-end Frameworks (that you may have already used) are built with languages such as LESS, SASS or Stylus.

Common examples:



Here are a list of features SASS supports, I’m going to go over them in more details in future posts.

  1. Variables – Excited already?
  2. Nesting – yes we mean nesting CSS rules inside another like your HTML.
  3. Maths in Property Values – Finally!
  4. Mixins – Yeah, I’ll describe it later, I promise…
  5. Functions
  6. Javascript style comments – feeeww! Praise the LORD!
  7. Inheritance – I know feels funny to imagine.
  8. Arrays
  9. Loops – Repetitive Code? No Problem!
  10. Conditions & Control Structures – WOW!
  11. Imports & Partials – Kinda like CSS’s imports but Awesome-er!


What You Need

  • Basic HTML coding knowledge.
  • Working Knowledge of CSS is a must, as SASS is just an extension of CSS.
  • A good code editor, eg. Sublime Text, Coda or Text Mate
  • Knowledge in any other programing or scripting language like PHP or Javascript definitely helps.
  • Basic Knowledge of working in the command line, fearing the command-line wont get you far.


Installing Ruby

Sass was built in another cool and popular language called Ruby. Therefore it is essential you have ruby installed on your machine. Apple Macs already have ruby installed by default, but if you are on a Windows PC like me, you have to manually install it.

Installing Ruby on Windows

Download Ruby Installer for Windows
I bet, we all know how to install a simple program, but you should take note of the setup configuration, when you come to the following stage of the setup…
(though not mandatory but recommended for ease of use)

Installing Ruby

Recommended Settings


Installing SASS

The install process is as simple as running this simple command in the Windows command-prompt or Mac Terminal. (click on the links if you don’t know how to open them)

> gem install sass

Soon, within under a minute you should see stuff happening on your screen.

Windows Comand Prompt

Windows Command-Prompt

Mac Terminal or Linus Bash

Mac Terminal or Linux Bash

Which ever platform you’re on, as soon as you see the line “1 gem installed” being printed out to your command window, you can pat yourself in the back and celebrate for successfully installing SASS.


Verifying your SASS Installation

run the following command in command-prompt or terminal

> sass -v

it should print out the version of sass you have installed, for example:

> sass -v
Sass 3.2.13 (Media Mark)

If it does output something similar to this, then congratulations you have confirmed successful installation of sass.


Your First SASS File

First make a folder(eg. I made a folder named “SASS” on my desktop), and inside that folder make a new file named “style.scss” and insert this piece of code into that file…

//Color Variables
$blue: #0072ff;
$light_blue: #60a7ff;

    text-decoration: none;
    color: $blue;

    //Links on Hover
        text-decoration: underline;
        color: $light_blue;


Example Folder Structure

Example Folder Structure

I’ll explain this code in the next post of this series. For now, know that this already shows how to define and use variables and how to nest selectors inside one another. This code simple defines and styles for links and the their hover state.

Note that we stored it in a file with the extension “.scss” not “.sass”. In practice both the extensions are valid sass extension but sass has two different syntax and so the extension is used to tell the SASS engine which syntax is being used.

  • SASS Syntax which is a little old and uses indentation for code blocks.
    It doesn’t use curly brackets to define blocks of Code and it doesn’t use semicolons to end lines, instead it uses line breaks.The following code is the same as above but in sass syntax

    $blue: #0072ff
    $light_blue: #60a7ff
      text-decoration: none
      color: $blue
        text-decoration: underline
        color: $light_blue
  • SCSS Syntax is the one everyone prefers as it closely resembles CSS code, with curly brackets and semicolons. Valid CSS is also valid SCSS.
    Note: We will be using this syntax through out this series.


Generating your first CSS

  1. Once again, open your command-line
  2. cd to the directory you created your sass file in.

On a Mac (or Linux)

> cd ~/Desktop/SASS/

On a Windows

> cd C:\Users\Omran\Desktop\SASS

Change Directory

  • Run the sass command with 2 arguments in the follwoing order…
    • Your Sass File
    • Name of the CSS file you want to generate


    > sass [your sass file] [Name of the CSS file you want to generate]


    > sass style.scss style.css

    The Sass Command


If all goes well, you should see a file named “style.css” has been generated in the same directory where you created your sass file….

style.css has been generated

style.css has been generated

If you open the css file you should be greeted with code that looks like this:

a {
  text-decoration: none;
  color: #0072ff; }
  a:hover {
    text-decoration: underline;
    color: #60a7ff; }

There you go! SASS has done its magic, it has converted SASS code to Valid CSS. Notice all the comment have vanished. normally its not common for you go go through the generated css files so SASS just ingnores the comments when compiling SASS to CSS.
Wait, the code’s indentation looks a little odd right? That is because the code was output in nested style, which is the default style in sass.. to make it easier to read you can run the sass command with the style option set to expanded, which is the type of output a human would generate….


> sass style.scss style.css --style expanded

This will generate this code:

a {
  text-decoration: none;
  color: #0072ff;
a:hover {
  text-decoration: underline;
  color: #60a7ff;

Much better right? For the course of this series, we will use the expanded style output. So to follow along, this is important.


Afraid of the command-line?

I strictly advise against using Graphical Applications, I mean you’re a Web Developer! What have you got to fear about the command line? But, if you really do hate the command-line as much as you hate broccoli, we can’t blame you. So here a small list of Graphical Applications for your SASS Projects.


Free, Cross Platform, pretty fast….



Paid, Cross Platform


Free but extremely Slow on Windows…




We have just scratched the surface of SASS, SASS has a few more commands, and a lot more features we can take a look at. We will be looking at those in the next posts of this series.
SASS for Beginners: Basics

Go ahead! Start reading!

4 comments to “An Introduction to SASS – for beginners”
  1. Pingback: SASS for Beginners: Basics

Leave a Reply

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