An overview of Sass Maps

In this article, we are going to have an overview of Sass Maps.


Introduction

Sass brought a lot of interesting features that help us to create style sheets more easily and more elegantly. One of those features are the Maps. Let’s see what they are.

Definition

Basically, Maps are like associative arrays. A Map has a name and one or more unique key associated with one value. A Sass Map looks like this:

Examples

So, let’s declare a Map to make a few examples:

Accessing a value

We can access a value like so:

Here, we use the function “map-get()” that takes, as arguments, the name of the Map and the key we want to target.

Checking a value

We can check if a value exists like so:

So, knowing that, it is easy to create such a function:

Nested Maps

Let’s go a little further and imagine something like this:

Here, we have a nested Map. We can use it like so:

Creating loops

With Maps, we can easily create loops like so:

Conclusion

Through this brief article, we saw what Sass Maps are. We had a few examples of how to use them and where they could be helpful.

One last word

If you like this article, you can consider supporting and helping me on Patreon! It would be awesome! Otherwise, you can find my other posts on Medium and Tumblr. You will also know more about myself on my personal website. Until next time, happy headache!

Mátyás Lancelot Bors

Written by

WebDeveloper / Writer / Musician / https://www.mlbors.com / https://medium.com/@mlbors

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade