Full Tutorial on how to use SASS to improve your CSS

If you use CSS, learning SASS will save heaps of time, code and pain. It's basically CSS with more features and functionality, and while it's been around for a while now, it's good to know and understand it inside and how to take full potential of its abilities.

SASS is pre-processed CSS with tools like nesting, variables, mixins and more. Writing in SASS and then compiling your code to CSS ends up being the same result (CSS) however the pre-processed SASS has more flexibility.

Nesting means you can do things like:

// CSS is manual, and strict
.css { color:red; }
.css .doesnt { color:darkred; }
.css .doesnt .let .you { color:verydarkred; }
.css .doesnt .let .you { color:veryverydarkred; }
.css .doesnt .let .you .nest { color:veryveryverydarkred; }

// SASS lets you do values and nest!
$color:red;
.sass { 
  color:$color;
  .lets { 
    color:darken($color,10%);
    .you { 
      color:darken($color,20%);
      .nest { color:darken($color,40%); 
}}}}

Thanks @CD for fixing my example :)

If you want to know more, check out the video which will cover:

Setting up Sass in Brackets
Difference between CSS and SASS
How nesting works
Using variables
Applying mixins and extends
Using the & operator

Check out more about SASS on their website:
https://sass-lang.com/

Want to see more:

I will try to post new great content every day. Here are the latest items:

Follow and support me:

Adrian @ Youtube
Adrian @ Patreon
Adrian @ Twitter

PS. Does anyone know how to add colors to 'pre' code on dev.to?