Posts

CSS to SASS : A preprocessor help (Complete guide)

Complete guide CSS to SASS or SCSS's
CSS to SASS

What is SASS? 
Sass stands for Syntactically Awesome Stylesheet.
Sass is an extension to CSS, it is a CSS pre-processor and is completely compatible with all versions of CSS.

Sass reduces the repetition of CSS and therefore saves time. Sass is free to download and use.

CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. 🔥🔥

Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance, and other nifty goodies that make writing CSS fun again.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use on your website.


Nesting :

Code is more readable now

Mixins


*Again Dry Code & Has a Great Workflow

Modules

You Don't have to write your SCSS in a single file.
you can split it up however you want with the @use rule.


Inheritance

Now, this is something really useful and yes again it's Dry code.


Functions & For loop
Similar to lightness, SASS has so many built-in functions which are very large applications.

Similarly to @for, SASS has @each, @while, @if & @else flow controls.

Operators


Doing math in your CSS is very helpful. Sass has a handful of standard math operators like:-
+,-,*,/ nad %


We have discussed the following terms in our post-
  • Variables
  • Nesting
  • Mixins
  • Modules
  • Inheritance
  • Functions and Loops
  • Operators

Hope you have learned something new today :)

Do you find it helpful?
Let me know in Comments

Happy Coding #CodingHindi

Post a Comment

© Coding Hindi. All rights reserved. Premium By Raushan Design