DEV Community

Cover image for Full Tutorial on how to use SASS to improve your CSS
Adrian Twarog
Adrian Twarog

Posted on

Sass Tutorial 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?

Discussion (1)

Collapse
ceo profile image
CD

The example code is wrong , it should be

// 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%); 
}}}}
Enter fullscreen mode Exit fullscreen mode