Why should you use SASS/SCSS?

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

What is Sass?

Codecademy : What is Sass?

The Net Ninja : SASS Tutorial #1 - What is SASS?

Types of Sass

Kevin Powell: sass vs scss - what's the difference and which should you use?

Peter Sommerhoff: Sass Beginner Tutorial #2: Sass vs. SCSS

Tutorials(Youtube)

freeCodeCamp.org : Sass Tutorial for Beginners - CSS With Superpowers

Dev Ed : Learn Sass In 20 Minutes | Sass Crash Course

Design Course : Learn Sass in this Free Crash Course - Give your CSS Superpowers!

Traversy Media : Sass Crash Course

More

Kevin Powell : Getting started with Sass

Udemy

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

Modern HTML & CSS From The Beginning (Including Sass)

Official Docs

Sass Documentation

Did you find this article valuable?

Support Raghav Singh Gulia by becoming a sponsor. Any amount is appreciated!