scss vs sass

Hey Guys !

This is a blog on the differences between SCSS and SASS.

I keep updating this blog , so let me know your thoughts in the comments section .

Whenever I used to work on CSS I always find something missing , for example I was not able to reuse an existing class and I had to create a new class even though almost all the properties were same . Apart from inheritance there where other missing features like usage of variables . Sass provides the missing features in css .

Lets discuss on the first feature , the variables .

In sass I can use a variable name $bgcolor,

/* Use the variables */

body {

    background-color: $bgcolor;

   

  }

But since I have not defined it I will get an error

 ERROR in ./src/app/app.component.scss

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    background-color: $bgcolor;

                     ^

      Undefined variable.

  ╷

3 │     background-color: $bgcolor;

  │                       ^^^^^^^^

  ╵

  stdin 3:23  root stylesheet

So I need to define a variable like this ,

$bgcolor : lightblue;

     
Make sure you add $ symbol in the beginning of the variable name otherwise you will get an error message as

bgcolor : lightblue; ^ Expected "{". ╷ 3 │ bgcolor : lightblue; │ ^ ╵

     



Thanks !.