Beginner’s guide to SASS

May 1, 2018 Ruchi Jain

We generally hear people talking about SASS, but what exactly is SASS? Is it a new language? Is it a new way of writing CSS? How different is it from CSS?

Let’s take a short journey today to figure it out.

First and foremost, the biggest question people have — What is SASS? SASS is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). Think of it as an extension of CSS that adds power and elegance to the basic language. It gives us various features such as:

  • variables
  • nested rules
  • mixins
  • partials
  • extend/inheritance
  • control directives

In other words, SASS helps organize large stylesheets in a more maintainable manner. We will look into these features in detail below.

Throughout this article, we will be using SCSS syntax in our examples. In all images, the left side shows the written code and the right side shows the compiled style.

SASS Syntax

But what’s the syntax for SASS? In SASS there are two ways of writing — Indented and Sassy — but after being compiled they generate similar output.

  • Indented (SASS): this is the first type of SASS syntax. It uses syntax similar to Haml. It focuses on indentation to separate code blocks and newline characters to separate rules. Here is a sample style
  • Sassy CSS (SCSS): this is the newer version and uses block formatting like that of CSS. It uses brackets and semi-colons. Even normal CSS is valid in this syntax. Sample code using this syntax looks like

As you may have noticed, no matter which way you write, the compiled output is still the same.

SASS Features

Now that we are familiar with SCSS syntax, let’s dive into the wonderful features it provides.

Variables

Think of variables as a way to store information that we can reuse throughout our stylesheet such as colors, fonts, etc. Variable assignment is done using a colon (:) and starts with a dollar sign ($). Variables can either be a number, string, color, or boolean.

Nested rules

In SASS, we can nest CSS selectors in a way that follows the same visual hierarchy as HTML. Below is a very simple example

Mixins

Allow you to chunk up CSS declarations to be reusable with one reference such as vendor prefixes.

Partials

These are files that contain little snippets of CSS that can be included in other SASS files. They start with _. Having _ in the filename, which tells SASS not to compile it to a normal CSS file.

Extend/inheritance

There are often cases when designing a page where one class should have all the styles of another class, as well as its own specific styles. This is a good use case for inheritance. In SASS, inheritance is achieved by using the @extend keyword. A single selector can extend more than one selector. We can even do chaining extends.

Control directives

Control directives and expressions are used in SASS to include styles only under some conditions or to include the same style several times with variations. Control directives are an advanced feature and exist mainly for use in mixins. These control directives are:

  • @if: Takes an expression and executes the block of styles underneath the directive, if the evaluation does not return false or null.
  • @for: Repeatedly outputs a set of styles in a loop. If <start> is greater than <end>, then it decrements instead of increments.
  • @while: Takes an expression and repeatedly outputs the nested styles until the statement evaluates to false, just like any other while loop.
  • @each: Usually has the form:

@each $var in <list or map>

It sets $var to each item in the list or map, then outputs the styles it contains using that value of $var.

This is a very high-level description of SASS and its wonderful features. We hope this gives you a good starting point.

You can try out SASS online using this link. Have fun and enjoy SASSing.


Beginner’s guide to SASS was originally published in Achievers Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Previous Article
Are you having fun at work?
Are you having fun at work?

A few years ago I found myself diligently working non-stop for three days at a start-up to bring up a websi...

Next Article
How to Incentivize the Modern Workforce
How to Incentivize the Modern Workforce

With the inherent uniqueness of the individual in the corporate workforce, it is a virtual impossibility to...