In this guide i want to show why you should stop wasting time writing CSS, i'm not trying to say that you are doing a bad thing but what i want to tell you is that there is a more intelligent way to write CSS nowadays so why you should waste your time?

The solution that i'm talking about is SASS, with it you well waste less time have a cleaner code and work better and the end result will always be a perfectly minimized .css file :)

And... don't worry in reality is more similar to CSS than what you may think.

Prefer video??

10 ~ Syntax

When you start to use SASS you will notice instantly, why? cause you don't need any more graphs and semicolons that every time breaks everything, that give a cleaner view to the code too.

You have a cleaner way to write nested selectors

9 ~ Variables

Yes you heard right in SASS you can rely on variables just like Javascript; Using them is essential because it will save you a lot of time instead of writing everytime the hex or rgb color code.

If you define a primary color and use it inside all the website and let's suppose that you want to change that color, with SASS the only thing that you have to do is change the hex color on you variable declaration.

8 ~ Mixins

This things are really fantastic, they are really useful since they help you to define a block of code and reuse it whenever you want let's make an example

7 ~ Functions

mmm yes functions may seem a little bit similar to mixins but... The main difference between Mixins and Functions is that functions return something and mixins don't, they are more passive.

6 ~ Imports

Imports are one of the major features of SASS with them you can import CSS files too, and they are not like when you add multiple css files with the link rel tag simply because when doing so you are making and http call.

NOTE: don't use @import instead use @use for more informations you can check out the docs.

5 ~ Maths

When writing CSS for years you will feel the limitations, one of them is that you can't add subtract or multiply... you can't do math.

4 ~ Logic

Another thing missing in CSS is the logic, with SASS the you can use a lot of things present in the majority of languages for example if statements, loops and other things... for the sake of simplicity i will make only make the if example.

In the example below i if i have the $color1, that refers to the background color of the box, setted to black inside it the h1 text will return white otherwise it'll return black

3 ~ Clean and easy to read code

Sass really makes you code really clean to see and therefore is more easy to read, you can use the combination of mixins functions variables etc to move you code to a next level.

Having a palette.sass file for example that contains all your palettes with all variables containing the various colors is much cleaner.

Other things that help the cleaniness aspect are imports and names of mixins or function;

Importing files makes you life more easy let's suppose that you have a structure

2 ~ Faster development

With SASS your will go way more fast than writing normal css, in my opinion one of the main things that slowed me down is nesting selectors every time.

Everytime writing semicolons is another thing that i hated but i had to do.

One of the main things that gives you speed is reusable code, so you can respect the DRY principle.

1 ~ Production ready

Your SASS code will be transformed in a fantastic minimized .css file, the only thing that you have to do is to import you style file to you HTML.