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:

• 4 Simple CSS Hover Transitions for your Elements Background
• How to implement Dark Mode with CSS new media call: prefers-color-scheme
• Why you should Whiteboard your Design & Development, UI & UX
• Creating a Mobile Design and Developing it

Follow and support me:

Adrian @ Youtube
Adrian @ Patreon
Adrian @ Twitter

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

Comments

[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%); 
}}}}