Sass Tutorial

Sass (short for Syntactically Awesome Stylesheets) is a cascading stylesheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.

Sass is a CSS preprocessor.

Sass is an extension of CSS that helps us reduce repetitive CSS code and save development time.

Sass is fully compatible with all versions of CSS.

Sass extends CSS3 by adding features such as rules, variables, mixins, selectors, inheritance, and built-in functions.

Sass generates well-formatted CSS code, making it easy to organize and maintain.

Sass files have the .scss extension.

Sass Example

/* Define variables and values */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

Prerequisites for Reading This Tutorial

To understand this tutorial, you should have the following basics:

• HTML Tutorial
• CSS Tutorial

Why Use Sass?

CSS alone is not powerful enough, leading to repetitive code that cannot be reused and is difficult to maintain.

Sass introduces a rational mechanism for style reuse, adding features such as rules, variables, mixins, selectors, inheritance, and built-in functions.

For example, you might reuse a hex color code many times in CSS. With variables, if you need to change the color code, you only need to modify the variable's value:

Sass Example

/* Define color variables; to change color values, modify these */
$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.