Sass Syntax

There are two ways to code Sass. Here's an overview of each one.

Sass comes with two different syntaxes. There's the original syntax, and then there's a newer syntax. Whichever syntax you choose to use is up to you. Both syntaxes result in the same CSS being compiled.

The Two Syntaxes of Sass

The Indented Syntax

The original Sass syntax, referred to as "the indented syntax" uses indentation to separate code blocks and newline characters to separate rules. This syntax doesn't use the curly braces or semi-colons like SCSS or CSS uses.

Some developers prefer this syntax, as there's less to type than the SCSS syntax.

Files using the indented syntax are typically saved with a .sass extension.

Here's an example of a Sass file using the indented syntax:

This will result in the following CSS being compiled:

SCSS Syntax

SCSS stands for Sassy CSS. The SCSS syntax is a newer syntax that uses block formatting like that used in CSS. SCSS uses braces to denote code blocks and semicolons to separate lines within a block.

Some developers prefer this syntax, as it is more closely aligned to the CSS syntax.

SCSS files are typically saved with a .scss extension.

This will result in the same CSS being compiled as the above example using the indented syntax.

You can choose to use whichever syntax you prefer. These two examples will result in the exact same CSS being generated.

This tutorial mainly uses the SCSS syntax.

Typically, a file with a .sass extension is called a"Sass file", and a file with a .scss extension is called a "SCSS file".

However, in this tutorial, unless specified otherwise, the term "Sass file" is used to describe either one.

Comments

Before moving on, we should take a quick look at comments in Sass.

Sass supports single line comments and multi-line comments just as CSS does. Sass also uses the same syntax for comments that CSS uses. However, there's one big difference.

In Sass, single line comments are declared with two forward-slashes // at the start of the comment, and are not included in the compiled CSS file. Multi-line comments use the same syntax as CSS and are included in the compiled CSS file.

In CSS, both single line comments and multi-line comments begin with /* and end with */.

Single Line Comments

The following comment is a single line comment. This is because the line starts with //.

This comment will not appear in the compiled CSS file.

Multi-line Comments

In Sass, multi-line comments are declared the same way they are in CSS — they begin with /* and end with */.

In this example, the comment will appear in the compiled CSS file.