Sass (short for Syntactically Awesome Style Sheets) is a CSS preprocessor that adds features that aren't available in regular CSS.
In other words, Sass is a CSS language extension that allows us to use enhanced features that don't exist in regular CSS - like variables, nesting, mixins, inheritance and other features that we will soon learn more about. Sass is a stylesheet language that’s compiled to CSS.
<aside> 📌 Sass has its custom syntax which browsers don't recognize by default. Because of that, we first have to use a compiler to translate the SASS syntax into the regular CSS syntax that the browser can interpret.
</aside>
Preprocessors help us code more efficiently by adding additional features into normal CSS. They allow developers to write cleaner and easier to understand CSS code.
<aside> ℹ️ Make sure that you are familiar with regular CSS and programming fundamentals (like understanding the concept of variables and functions in JavaScript or other programming languages).
</aside>
There are many approaches and Sass applications which translate the Sass syntax into the regular CSS which the browsers can understand.
<aside> ℹ️ You can find different ways to install and use Sass in their official install page: https://sass-lang.com/install
</aside>
We are going to cover installing and using Sass via the command-line (using Node.js) and via an extension for the Visual Studio Code editor. At a later point, you can choose any other approach (command-line, application, code editor plugin) to install and use Sass that you prefer the most.
<aside>
📌 We write Sass code in files with the .scss extension. These files are used to generate standard .css files that are read by the browser.
</aside>
There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features. Files using this syntax have the
.scssextension.
The second and older syntax, known as the indented syntax (or sometimes just “SASS”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the
.sassextension.
Source: https://sass-lang.com/documentation/syntax
<aside> ℹ️ In this tutorial, we will use the more popular SCSS syntax when writing Sass code.
</aside>
Sass can be installed from the terminal using npm (Node Package Manager), which comes as a tool included in Node.js.
<aside> ⚠️ Make sure you have Node.js installed before moving on! You can find installation instructions for Node.js here: https://nodejs.org/en/download/
</aside>
After Node.js is installed, you can run the following command in your terminal to install Sass: