What is Sass?

The full form of Sass is Syntactically Awesome Style Sheets. It is a super-set of CSS, like less famous Less and PostCSS. It means that normal CSS is completely valid here, but you get some extra superpowers like nesting, loops, etc.

Syntaxes of Sass

There are 2 types of Sass:

SCSS
- Short for Sassy CSS
- More used
- More similar to CSS
SASS
- Get rids of the brackets in CSS
- Less used
- Less similar to CSS

Which syntax should you use? It depends on your personal preferences. Check out the videos I have written in the resources.

The superpowers

Variables

In SASS/SCSS you have variables, which are just some things that store values. It is similar to the custom properties in CSS, but with a shorter syntax. Example-

CSS code

:root {
  --black:#000;
  --white:#fff;
}
body {
  background-color:var(--black);
  color:var(--white);
}

SCSS code

$black : #000;
$white : #fff;
body {
  background-color:$black;
  color:$white;
}

Nesting

In SASS/SCSS you can do nesting, which means that you can nest things in other things. Here's an example-

CSS

div {
  color:#ffff00;
}
div a{
 background-color:#698270;
}
div a:hover{
  background-color:#abf7bf;
}

SCSS

div {
  color:#ffff00;
  a{
   background-color:#698270;
   &:hover{
    background-color:#abf7bf;
   }
  }
}

Partials

In SASS/SCSS, you can have multiple files called partials and import them into the main file. This helps in a more refined file structure.

Loops

You can also use loops in SASS/SCSS. It is a hard topic so we will not discuss it here.

Mixins

These are like functions in which you can save repeated code and add it where you need. You can also pass arguments. This helps to implement the DRY(Don't Repeat Yourself) principle better.

And Much More...

There are built-in functions like darken() and lighten() and so much that it will make this blog longer than 10 hours to read. So I will wind up with some resources.

Resources

Why should you use SASS/SCSS?

What is Sass?

Syntaxes of Sass

The superpowers

Variables

Nesting

Partials

Loops

Mixins

And Much More...

Resources

What is Sass?

Types of Sass

Tutorials(Youtube)

More

Udemy

Official Docs

Did you find this article valuable?