Full Tutorial on how to use SASS to improve your CSS

Adrian Twarog - Feb 9 '20 - - Dev Community

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?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .