Advanced Use of Sass Maps
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…
How can we build our heading elements now with those variables?
— The answer to this is easy, we can’t! Not automatically with the loops… Manually, yes, as I will show below. Otherwise we could duplicate those values to another variable which will be either a list or a map and then iterate through it and build it up. But who wants duplication? Nobody!
Example with Maps
Example using Sass maps…
What can we tell from this example?
- I did not use plural, for two reasons. It sounds more natural when you want to grab any of those values and nested map properties follow the css property names
- It looks natural and clean
- I combined all of the “variables” into a single “map”, that now belongs to a single element/component
- I was very explicit about the keys and now we know exactly what the value will be used for
How can we build our heading elements now with this map?
— Well, let me show you… It is very easy, but a little messy too.
Dynamically build up HTML heading tags from 1–6…
Wait, wait… Hol’ the fu*k up!
— I know that dynamic building doesn’t look pretty, but we can simplify this even further, with introduction to some new functions.
Bear with me, I promise it will be worth your while!
Functions to simplify the use of Maps
I have written some functions already for one of my open source projects. I’ll leave a link to it at the end, because it will be highly useful to learn from, if you happen to like this approach.
So, I’ll be sharing these functions with you and show how does it significantly improve your Sass code… Functions will be posted as images, but I’ll also link each title to the original function that I’ve written, so you can add it to your current or future projects.
I want to thank Hugo Giraudel for some function ideas and inspiration! ✌️
Get
Sass Function — Search for any value contained within nested maps, by using dot notation as the key argument
Function above is my magical function. I got inspired from Laravel Framework. Although, instead of naming the function config(), I decided to name it get(), because it looks better and it is shorter! 😂
As you can see, my function already depends upon three other functions that I have also written…
String Explode
Sass Function — Split a string by delimiter
Deep Map Check
Sass Function — Check if nested map has a value by the keys
Deep Map Get
Sass Function — Get a value from nested map by the keys
Each title of these functions is linked to the original source code… Feel free to take a better look if you like. Throw me a 🌟 and maybe follow, while you’re on GitHub? 🙏
Alright, time to see get() function in action. I will use the same example from the above and just improve the map a little bit and then explain you what did we achieve in the end.
Sass Example — Simplified use of Maps
I could’ve named the $dfr-confg map differently, maybe just $config, but I did not, for a reason. Because the get() function already defaults to $dfr-config as the second argument. To pass a second argument with our differently named $map, would make the example look a bit larger, than supposed. But you can copy/paste/download the function and modify the default to match your own, custom $map variable.
Isn’t it already drastically improved!?
Overriding Map Defaults
I even prefer to split the map configuration within a couple of different files…
- Heading
- Color
- Container
- Breakpoint
- Font
- Spacing
But then you might ask…
How do you use this
get()function to access all the properties within many different Maps?
— I do not create multiple maps, just one, and I extend it each time…
I will leave a couple of links with this situation, where you can take a look at how I exactly use it.
- All variables
- All config imports
- Main file which imports variables, configs and more
- Example where I extend the Map
Through those examples, you can already tell how powerful Sass Maps with some “base/root” variables and functions can be!
I wouldn’t bother you any further… ✌️
Obviously, there’s a lot to cover and I’m hoping that you can learn from all the examples that I provided as well.
After I developed this, I can’t go back to plain variable mess.
The open source project that I’m working on is called differs and you can take a look at it on my GitHub repository. It is still a work in progress and I’m trying to get more motivation, but I am having some hard times finding it…
Thank you very much for reading. If you have any questions, feel free to ask me. I’d appreciate a follow on Medium, Twitter and/or GitHub.
