SCSS over CSS

Previously , using CSS I used to think SCSS is too difficult for styling an website irrespective of framework,  libraries (on which we are making the website). SCSS is CSS syntax friendly so this helps us like only changing the file extension. We can write normal CSS in SCSS but one should not do that because there’ll be no advantage of using SCSS.

When I learned SCSS, from then I feel like why I didn’t use it before.

It has too much flexibility as well as advantages over CSS.

1.     The very first point to be noted is ‘Nested Syntax’

The above example shows if we want to fix a image we have to write this code multiple time as multiple look alike image sections will be there.

Here comes the SCSS, we can just use mixins and voila! Mixins are just like declaring a group of CSS and while using it just call the mixin using include.

2.     Variables.

Another wonderful advantage of SCSS is declaring variables. Now you can say we can also declare variable is css, right!

Yes we can but again the term ‘flexibility’ comes. If we set a value in CSS we can’t change it. If we do the earlier value will be changed.

If we pass a parameter in the SCSS variable and set a initial value for the parameter, we can change the value for later uses without changing the initial value.

E.g: We want to make a two circles with different radius & background-color

Border-radius will be 50% for all cases so it is static value.

The parameters are always declared with ‘$’ sign .

Here we can see a big circle with red background color.

This is the small one with green background color.

Conclusion:

SCSS is always preferred over CSS because of its no-repetitive structure and flexibility.