Beginner’s guide on Sassy CSS
What is Sass?
I’ve been using SASS recently and I love how syntactically friendly it is for me to write CSS now and I hope this guide will provide you a basic understanding of SASS and get you over to the clean side.
SASS stands for Syntactically Awesome Style Sheet. It is a stylesheet pre-processor language that is an extension of CSS that takes your input data and spit it back out into plain CSS. SASS is awesome since it offers a lot of quality of life upgrades by allowing you to use variables, mixins and a bunch more features on top of CSS to keep your stylesheets clean and organized.
How to install
Using Node Package Manager
npm install -g sassUsing Homebrew on MacOS or Linux
brew install sass/sass/sassUsing the .scss file extension
Instead of creating your traditional .css files, you simply switch over to .scss to start writing SASS compatible CSS.
Why use SASS
If you know CSS, you know SASS. Modern SASS has provided the awesome SCSS syntax that is fully compatible with CSS. You write it the same way you would with normal CSS but with additional features.
SASS has been around for 12 years and it has a very healthy and active community with tons of great resources and documentations to learn from, a great bookmark to have is the Official SASS Documentation, I find these documentations very easy to read and full of well explained practical examples.
Variables
Variables are great for storing attributes that you want to reuse such as font-stacks, colors and sizes.
In the example below you can see that I want to reuse the red color and my favorite google font.
We can create variables by simply creating a name with a $ symbol at the front, and we can call it again anywhere in the stylesheet.
Mixins
It makes groups of CSS properties to “mix in” to other classes that you want to hold the same value like my example below.
You use “@mixin” to declare your mixin properties and you can reuse your mixins anywhere in the stylesheet by using the “@include” declaration.
Nested Classing
By far my favorite feature of SASS, I find it way easily to add my CSS selectors right inside the CSS class instead of the tradition way of writing a sub-class for each selector, which gets really overwhelming when you are trying to build a app with a lot of interactive CSS components.
Below you can see an example of how I used SASS to clean up a total of 3 classes for a button and have all the properties such as my hover and active selector all into a single contained class.
You simple use the & operator to declare your subclasses for selectors.
Conclusion
I hope this article helped you understand SASS a bit. I personally love SASS due to it’s user friendly-ness and giving me the ability to keep my stylesheets as DRY as possible. I have been converted to the ways of the SASS and I am not going back. 💁♂️
If you enjoyed this article, please follow or leave a comment.
