I’ve been using Sass for a long time now, and I came to one conclusion… When, I started developing a front-end CSS framework, I had plenty of variables and I had to think hard “how to get rid of them”, but still keep the flexibility for the end user.

Have you ever seen a variables file of Bootstrap v4? If you did not, go ahead, take a quick look… They want to make everything so flexible, so that users may override the variables and have the changes applied when compiled.

It’s a decent thing to do, but it just makes the variables file so messy, unorganized; in one word — flooded. If your file is somewhat similar to that, the least you can do, if you plan to stick with variables, is to separate them into different files, so that each file contains the variables that are used for specific element/component instead. Couldn’t describe this shorter, sorry… Hope it is clear! 🤔

I will show you the way and hopefully teach you a couple of things, regarding this…

Variables vs Maps

Variables should still be used, in every Sass project, but not as much… I want to make that clear. Think of variables in Sass as something that should be defined as base or root. Common values that could be used or manipulated within the maps.

To provide the simplest example, I’ll go with a topic of “defining heading sizes, margins & weight”. As you know, in HTML there’s total of 6 headings available…

Example with Variables

Example using Sass variables…

By looking at this example, you can tell that I’m not explicit about what will the variable be used for. Clearly we could assume, but that’s bad… If I was more specific, it’d end up having very long variable names, such as:

$h1-font-size $heading-font-weight

$heading-margin-bottom

Personally, I do not prefer using numbers in variable names, like h1 , but defining the number as a word is even worse…