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:
- nested rules
- 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.
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.
Now that we are familiar with SCSS syntax, let’s dive into the wonderful features it provides.
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.
In SASS, we can nest CSS selectors in a way that follows the same visual hierarchy as HTML. Below is a very simple example
Allow you to chunk up CSS declarations to be reusable with one reference such as vendor prefixes.
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.
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 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.