SASS
Web dev tools that save time are your best friend and one of the first things you’ll learn about code is that it needs to be DRY (“Don’t Repeat Yourself”). The second thing you’ll probably learn is that CSS is usually not very DRY.
Enter the world of the CSS preprocessor, a tool that will help you write maintainable, future-proof code, all while reducing the amount of CSS you have to write (keeping it DRY).
Perhaps most popular among them is Sass, an eight-year-old open-source project which pretty much defined the genre of modern CSS preprocessors. Although a little tricky to get to grips with initially, Sass’s combination of variables, nesting, and mixins will render simple CSS when compiled, meaning your stylesheets will be more readable and (most importantly) DRY.
SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful. In some ways, you may think of SASS as a style sheet extension language because it extends the standard CSS characteristics by introducing the benefits of a basic programming language. So SASS will compile your code and generate the CSS output a browser can understand.
One of the great benefits of using a CSS pre-processor like SASS is the ability to use variables. A variable allows you to store a value or a set of values, and to reuse these variables throughout your SASSfiles as many times you want and wherever you want. Easy, powerful, and useful.
It's CSS syntax friendly
If you know CSS, you know SASS. SASS comes with two different syntaxes: SASS itself and SCSS, the most used one. SCSS syntax is CSS compatible, so you just have to rename your .css file to .scss et voilà! Your first SCSS file has been created, just like that.
Of course, by doing this you are not using any of the superpowers and abilities SASS provides, but at least you realize you don't need to spend hours and hours to start using SASS. From this starting point, you would be able to learn the SASS syntax as you go.
It offers variables for whatever you want
One of the great benefits of using a CSS pre-processor like SASS is the ability to use variables. A variable allows you to store a value or a set of values, and to reuse these variables throughout your SASS files as many times you want and wherever you want. Easy, powerful, and useful.
It uses nested Syntax
Another fantastic benefit of CSS pre-processors is their improved syntax. SASS allows you to use a nested syntax, which is code contained within another piece of code that performs a wider function. In SASS, nesting allows a cleaner way of targeting elements. In other words, you can nest your HTML elements by using CSS selectors.
Benefits of nesting:
- More natural syntax and easy to read in most cases
- Prevents the need to rewrite selectors multiple times
- Better code organization and structure thanks to its visual hierarchy, which bring us to
- More maintainable code.