Getting Sassy with my CSS💁‍♂️

Beginner’s guide on Sassy CSS

What is Sass?

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

npm install -g sass

Using Homebrew on MacOS or Linux

brew install sass/sass/sass

Using 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

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

In the example below you can see that I want to reuse the red color and my favorite google font.

Not so Sassy

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.

Sassy

Mixins

Not so Sassy

You use “@mixin” to declare your mixin properties and you can reuse your mixins anywhere in the stylesheet by using the “@include” declaration.

Sassy

Nested Classing

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.

Not so Sassy

You simple use the & operator to declare your subclasses for selectors.

Sassy

Conclusion

If you enjoyed this article, please follow or leave a comment.

I’m a NYC based full stack developer and a part-time gaming nerd https://www.linkedin.com/in/stevenwubc/