SASS Tutorial

Learn SASS/SCSS

About SASS/SCSS

What You Should Know already

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

• HTML
• CSS

If you want to read these articles first, find the tutorial on our Website.

• What is Sass?
• Sass stands for Syntactically Awesome Stylesheet
• Sass extension in CSS
• Sass is a pre-processor for CSS
• Sass is fully compatible with all types of CSS
• Sass reduces CSS duplication 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?

Styles are growing, becoming increasingly complex and difficult to adjust. This is where a CSS pre-processor can help.

Sass lets you use non-CSS features, such as variety, merged rules, mixing, import, asset, built-in functions, and more.

A Simple Example of Why Sass Is Useful

Suppose we had a website that had three main colors:

#a2b9bc

#b2ad7f

#878f99

So, how much do you need to type those HEX values? MANY times. And what about the variety of similar colors?

Instead of typing the above values ​​over and over, you can use Sass and type:

Sass Emp.

/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

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

How does Sass work?

The 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 transmission. Therefore, you need to give the carrier (some type of program) some Sass code and get some CSS code.

Sass file type

Sass files have ".scss" file extensions.

Sass Comments

Sass supports standard CSS / * comment * / comments, and additionally supports ideas in line  // comments:

Sass .

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
  background-color: $primary_1; // here you can put an inline comment
}

Sass Installation

Sass System Requirements

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

Sass Official Website

Learn more about Sass on the official Sass website: https://sass-lang.com/

Install Sass

There are several ways to install Sass on your system. There are many apps that will help you work with Sass in a few minutes for Mac, Windows, and Linux. Some of them are free, but some are paid apps.

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

Sass Variables

Variable is a way to store information that you can use again later.

With Sass, you can save data in a variable way, such as:

• strings
• numbers
• colors
• booleans
• list
• nulls

Sass uses the $ sign, followed by a name, for a variable declaration:

Sass Variable Syntax:

$variablename: value;

The following example introduces 4 variables called myFont, myColor, myFontSize, and myWidth. After the variable is announced, you can use the variable wherever you want:

SCSS syntax:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 20px;
$myWidth: 769px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

Exp.

Hello World

This is a paragraph.

This is some text inside a container.

Therefore, when a Sass file is transferred, it takes a variable (myFont, myColor, others.) and a standard CSS output with the variable values ​​set in CSS, as likes:

CSS Output:

body {

  font-family: Helvetica, sans-serif;
  font-size:20px;
  color: red;
}

#container {
  width: 769px;