SASS Guide for Beginners

What is SASS?

I was confused at first because I wasn’t sure what SASS was and why someone would want to use it. It is a scripting language that turns your code into effective CSS, in simpler terms, it makes writing CSS a lot more efficient and adds functionality that otherwise would be harder or in some cases absent altogether.

Why use SASS?

As you learn more features and use them, you will really start to see its power!

Get Started

Now that you get an idea of what it is and why you should be using it, how do you get started? You will first need a SASS compiler to translate your code, I recommend using VSCode because they have good extensions that make it really easy.

Learn

Before we dive into the features of SASS, it is important to highlight that vanilla CSS can and WILL be used as part of this, so if you aren’t comfortable with vanilla CSS, learn that first and then come back.

Variables

Variables are very useful, as you can use the same variable for many things and change all of them at once easily. It also has a functional purpose now too.

Math

Very quickly, math operations in CSS usually need to be in calc() but with SASS you can just write the expression alone ONLY IF the types are the same.

Maps

Maps are a lot like hashes from other languages, and basically, they are a list of values with a key for each value that you can use to get the value.

Nesting

Nesting is my favorite part of using SCSS because it makes everything a lot less repetitive and a lot more organized. Let's say you want to style everything in a section called menu and then wanted to style the menu__paragraph1 and also wanted to add a hover function. This would require a lot of retyping that could be solved with nesting.

Functions

Functions can be called and return something, as well as compute which is generally its purpose.

Mixin

This is where the major organization comes in and mixins will drastically reduce the amount of code you need to write in situations where you need to repeat many lines of code.

If Statements

SASS has if statements too and they can be used in combination with the previous features mentioned. Let's take a look at how we can use this to toggle dark mode:

Conclusion

This is an amazing, powerful, and enjoyable upgrade for CSS and once you get comfortable with it and experience the incredible difference it makes you won’t ever want to go back. It is surprisingly easy to get the hang of if you are comfortable with HTML and vanilla CSS, and in my opinion really worth learning.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store