For starters, what is CSS?

CSS is short for Cascading Style Sheets, it is a style sheet language used for describing the look and feel of a document written in a markup language, the most popular being HTML. Now that you know what CSS is, you are probably asking yourself, what is SCSS?

SCSS stands for Sassy Cascading Style Sheets, it is a preprocessor which lets you use features that aren’t available by default with CSS, with this in mind, there are a lot of advantages that SCSS gives you over CSS, the most notable ones being:

1. With SCSS, you can drastically reduce the number of times you repeat yourself, and write clean, maintainable code.

2. SCSS can also take CSS code and work, meaning it is backward compatible.

3. Nesting – SCSS provides nesting, meaning the code can be better organized and structured thanks to the visual hierarchy.

4. Variables – A variable allows you to store a value or a set of them, and to reuse them throughout your SCSS files.

5. Mixins – If you have ever had a block of code repeating itself in your style sheet, this is where mixins come in. Mixins are like functions, they return a value or a set of them, and can take parameters including default values.

6. Import rule in SCSS – @import allows you to modularize your code, making it easier to organize and maintain, the difference between this and the css @import is that all imported SCSS files will be merged together into a single CSS file, and only a single HTTP call will be requested because you will be serving a unique CSS file to the webserver.

With all these advantages taken into account, and many more of them not mentioned like functions, control directives and expressions (if, for, while), interpolation, etc. SCSS gives you a lot of reasons to switch from CSS if you already haven’t.