YouTipSass Tutorial
# Sass Tutorial
!(#)
Sass (English full 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 with 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.
Sass files have the .scss extension.
## Sass Example
/* Defining Variables and Values */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize:18px;
/* Using 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 a foundation in:
* * *
## Why use Sass?
CSS itself does not have powerful enough syntax, leading to repetitive code writing, inability to achieve reuse, and difficulties in maintaining the code.
Sass introduces reasonable style reuse mechanisms, adding features such as rules, variables, mixins, selectors, inheritance, built-in functions, and more.
We can give an example: we often use hexadecimal color codes repeatedly in CSS. With variables, if we need to change the color code, we only need to modify the variable value:
## Sass Example
/* Define color variables; to change the color value, simply modify it 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.