HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Before you continue you should have a basic understanding of the following
Before you continue you should have a basic understanding of the following:
If you want to study these subjects first, find the tutorials on our Home page.
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.
Let's say we have a website with three main colors:
#a2b9bc
#b2ad7f
#878f99
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:
/* 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 using Sass, and the primary color changes, you only need to change it in one place.
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.
Tip: Transpiling is a term for taking a source code written in one language and transform/translate it into another language.
Sass files has the ".scss" file extension.
Sass supports standard CSS comments /* comment */
,
and in addition it supports inline comments // comment
:
/* 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
}