Sass

Sass is a CSS pre-processor.

Sass reduces repetition of CSS and therefore saves time.

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML
• CSS

What is Sass?

• Sass stands for Syntactically Awesome Stylesheet
• Sass is an extension to CSS
• Sass is a CSS pre-processor
• Sass is completely compatible with all versions of CSS
• Sass reduces repetition of CSS and therefore saves time
• Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
• Sass is free to download and use

Why Use Sass?

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

A Simple Example of why Sass is Useful

Let's say we have a website with three main colors:

So, how many times do you need to type those HEX values? A LOT of times. And what about variations of the same colors?

Instead of typing the above values a lot of times, you can use Sass and write this:

So, when using Sass, and the primary color changes, you only need to change it in one place.

How Does Sass Work?

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.

This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

File Type

Sass files has the ".scss" file extension.

Comments

Sass supports standard CSS comments /* comment */, and in addition it supports inline comments // comment:

Installation

System Requirements for Sass

• Operating system - Sass is platform independent
• Browser support - Sass works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera
• Programming language - Sass is based on Ruby

Official Web Site

Read more about Sass at the official Sass web site: https://sass-lang.com

Install

There are several ways to install Sass in your system. There are many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. Some of these are free, but some are paid apps.

You can read more about them here: sass-lang.com/install

Variables

Variables are a way to store information that you can re-use later.

With Sass, you can store information in variables, like:

• strings
• numbers
• colors
• booleans
• lists
• nulls

Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Syntax:

$variablename: value;