Sass Tutorial
Sass (full English name: Syntactically Awesome Stylesheets) is a stylesheet language originally designed by Hampton Catlin and developed by Natalie Weizenbaum.
Sass is a CSS preprocessor.
Sass is a CSS extension language that helps us reduce repetitive CSS code and save development time.
Sass is fully compatible with all versions of CSS.
Sass extends CSS3, adding features such as rules, variables, mixins, selectors, inheritance, built-in functions, and more.
Sass generates well-formatted CSS code that is easy to organize and maintain.
The Sass file extension is.scss。
Sass Examples
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Use variables */
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 foundation:
Why use Sass?
CSS itself is not powerful enough in syntax, leading to repetitive code that cannot be reused, and the code is also inconvenient to maintain.
Sass introduces a reasonable style reuse mechanism, adding features such as rules, variables, mixins, selectors, inheritance, built-in functions, and more.
Let's take an example: we often reuse hexadecimal color codes many times in CSS. With variables, if you want to change the color code, you only need to modify the value of the variable:
Sass Examples
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Use 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.
Other Extensions