Sass Tutorial
Sass (full English name: Syntactically Awesome Stylesheets) is a cascading style sheet 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, and built-in functions.
Sass generates well-formatted CSS code that is easy to organize and maintain.
Sass file extensions are.scss。
Sass Examples
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Use variables */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
Prerequisites for reading this tutorial:
To read this tutorial, you need to have the following foundations:
Why use Sass?
CSS syntax itself is not powerful enough, leading to repetitive code, no reusability, and inconvenient maintenance.
Sass introduces a reasonable style reuse mechanism and adds features such as rules, variables, mixins, selectors, inheritance, and built-in functions.
Let's give 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