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,
But since I have not defined it I will get an error
So I need to define a variable like this ,
Make sure you add $ symbol in the beginning of the variable name otherwise you will get an error message as
Thanks !.
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 !.