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?
Top comments (1)
The example code is wrong , it should be