Select Page
Beginner’s Guide To Sass – SASS Variables

Beginner’s Guide To Sass – SASS Variables

If you’re like me before I learned about SASS Variables, you probably had a separate sheet with color scheme information. Button hover colors written in notepad, stored under “project_styles.txt”. It’s ok, we’ve all been there. I’m happy to let you know that that’s now a long past history.

Enter SASS Variables

Imagine variables as  a way to save/store information about certain things. Border radius. Colors. Any CSS property, really. If you’re into PHP, for example, you’ll feel right at home, since SASS Variables are stored in quite a similar way. Here’s an example:

See how “English” that is? You create a variable by prepending $ in front of the word of your choice and after : you assign it’s property. You are really not limited to how you’re gonna name your variables, but common practice is to use clear English language with words separated by -. I think folks over at SASS don’t recommend using camelCase or PascalCase or snake_case, and I’ve never did, tho’ I think it would create little harm.

So once you do create some variables, you can put them to action like this:

After that’s pre-processed and munched away, resulting CSS would be this:

But see how much more readible that is? The Variables approach? Also, what’s cool is that you can RE-USE these variables EVERYWHERE. Create a $primary-color, $secondary-color, and similar variables for your task and you can store them in one _partial.scss, which would be your go-to place to check out the colors… instead of “project_styles.txt”. Ditch that. Bury it. Let the pipes sing the sad song.

AND THAT’S ALL THERE IS TO IT

Really, you got it! Variables are staple of any serious programming and understanding them first is important before moving on. Having a container to store information and reuse it in your project will save you tons of alt+tabing to check out the project specifications and you’ll grow to love it!