Sass tutorial
Sass (English full name: Syntactically Awesome Stylesheets) is a cascading stylesheet language originally designed by Hampton Catlin and developed by Natalie Weizenbaum.
Sass is a CSS preprocessor.
Sass is an CSS extension language that can help us reduce repetitive code in CSS and save development time.
Sass is fully compatible with all versions of CSS.
Sass extends CSS3, adding rules, variables, blending, selectors, inheritance, built-in functions, and so on.
Sass generates well-formatted CSS code that is easy to organize and maintain.
The Sass file suffix is .scss .
Sass instance
/* Define variables and values */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Define variables and values */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
What you need to know before reading this tutorial:
To read this tutorial, you need to have the following foundations:
HTML tutorial
CSS tutorial
Why use Sass?
The syntax of CSS itself is not strong enough, resulting in repeated writing of some code, unable to achieve reuse, and it is not easy to maintain in the code.
Sass introduces a reasonable style reuse mechanism, adding rules, variables, blending, selectors, inheritance, built-in functions, and so on.
For example, we will reuse the hexadecimal color code many times in CSS. When you have a variable, if you want to change the color code, just change the value of the variable:
Sass instance
/* To define color variables and modify color values, just modify them here */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Using variables */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
How does Sass work?
Browsers do not support Sass code. Therefore, you need to use a Sass preprocessor to convert Sass code into CSS code.