Why use SASS to write CSS? (CSS Preprocessor)
SASS is a CSS preprocessor, that makes it easier for developers to write styling code, which is ultimately converted into CSS code.
What is CSS Preprocessor?
CSS preprocessor signifies the stage before CSS. Yes, SASS code is not the style code that a website uses, but SASS is converted to CSS, and CSS is used in HTML pages to style them. SASS is just used to write styling code, just like you write programs in C language or Python. You can use variables, create functions, use those functions, write rules using if-else conditions, and a lot more. And when you have written the code, you compile the code and get a standard CSS file to use.
Advantages of Using SASS
If you are working on a small project, I would not recommend using SASS, but for a big project that requires thousands of styling rules in the CSS, you should consider using SASS, because it will make your life easy.
Following are some of the disadvantages of CSS which SASS solves:
-
In CSS, to make small changes, like changing the color of your color palette, you have to make changes at many places if you have a lengthy CSS file
-
If the CSS file is large, then it becomes difficult to structure it.
-
In CSS, there is code redundancy.
-
And at last, CSS code ends up being too lengthy.
Is SASS the only CSS Preprocessor?
Well, No, but SASS is the best CSS preprocessor. Yes, there are other CSS preprocessors too, but they are not that popular.
Here are a few of them,
-
Less
-
Stylus
-
PostCSS
How does SASS or CSS Preprocessor Works?
When you write a program in any programming language, you have to run the program to see the output or the result it produces.
Similarly, CSS Preprocessor, in our case SASS provides rules just like a programming language to write code for your stylesheet, for example, define a variable with color HEXA code as value, or create a function to handle different screen sizes, or maybe create a function to add different images as background based on some parameter value, all this can be written in SASS.
Not only this, SASS comes with some pre-defined modules, that you can use, then different features like Nesting, etc. can be used to easily write the styling code. And once all this is done, compile and you will get your old CSS code as output which you can save in a separate file and use in your HTML webpage.
Is SASS faster than CSS?
We cannot compare whether SASS is faster than CSS or not. Because on a webpage we use CSS and not SASS. Remember, SASS is not here to replace CSS, but it's here to make it easier for developers to write the CSS code. The browsers, only understand CSS.
