In the far 2016 (even if it's not that far), I decided to approach Sass, a bit because I was curious about pre-processor and a bit because I was looking for more dynamicity on my CSS. From 2016 until now (2019) CSS is changed a lot and, it's still evolving. That thanks to the big ecosystem of technologies behind and the massive community that help to support this language.

Sass is not the only one, in fact the other two most used pre-processor used are Stylus and Less. Unfortunately, they are not very intuitive and popular like Sass. However, even Sass at the beginning, it wasn't so intuitive but with Sass 3, the game changed and we finally received that we call now SCSS (Sassy CSS). This mix the power of Sass with the traditional CSS syntax, just wow.

Sass

  $width: 100px
$color: salmon

div
  width: $width
  background-color: $color

SCSS

  $width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}


But, why Sass?

Well, I personally found a few interesting functionalities on Sass that helped me to speed up my coding by solving a complex problem with an easy solution, that thanks to the mixins, loops, functions and variables. More importantly, my code now is super organised and simple to read thanks to nesting and partials.

From the other side, CSS is adding new features like CSS Modules and variables. That it's great but still not that great, at least for now.

Let's see the variables, these are very helpful especially for a large project or for a design system. So, use variables are very cool and people, believe me, life is so great when you use variables in your project. The news about CSS variables gave me a small hope but I don't really know if I'm ready to move from

  $mainColor: salmon;
$s: 33px;

.btn {
    background: $mainColor;
    width: $s*3;
    height: $s; 
}

to this

  :root {
 --main-color: salmon;
 --btn-size-: 33px; 
}

.btn {
    background: var(--main-color);
    width: 99px;
    height: var(--btn-size);    
}

It's not very flexible like in Sass also, CSS Variable is still not supported by our old friend IE.

Conclusion

Overall, I think that use a pre-processor is a personal choice and the idea to have to convert Sass to CSS everytime, let's say that it's not like write directly the code. However, Sass is becoming more and more popular, not only as a personal choice but also business.

It's also what the report from the State of CSS say and I really recommend to check on the site, State of CSS 2019

Also, if you want to know more about Sass, jump on Sass-Lang or just explore some work here on CodePen in the Topics section.

If you enjoied, just share! Thank you!