DEV Community


Using SCSS maps as object - is it good?

I'm a FrontEnd developer, specialized on Angular platform. I love design and music!
・1 min read

Hi to all!

For my latest project I've preferred to use SCSS maps instead of simple SCSS variables.

For example:

$fontSizes: (
  extraSmall: .75rem,
  small: .9rem,
  normal: 1rem,
  medium: 1.25rem,
  big: 1.5rem,
  extraBig: 2rem

So I can get those values around my stylesheets as follow:

font-size: map_get($fontSizes, extraSmall);

I just LOVE this method, I've converted all my SCSS variables (excluding the atomic variables like $globalBorderRadius) into maps, so I can group them into a specific set of scss variables.

What do you think about SCSS maps?
Have you ever used them? If yes, is this a good way to use them?

Let me know! :)

Discussion (3)

vicvicvic profile image
Victor F

And now the next step: convert these into functions:

@function fontsize($key) {
@if not map-has-key($fontSizes, $key) {
@warn "Color `#{$key}` not found.";
@return map-get($fontSizes, $key);

nicolalc profile image
Nicola Author

That's pretty cool, I think I'll implement in my projects! Thanks a lot!

teetotum profile image

I understand that it is highly subjective for every developer what feels elegant. If there is any good reason to group variables together the scss map is the right thing to use. But for the example you have posted I would still prefer the simpler font-size: $font-size-extra-small; over font-size: map_get($fontSizes, extraSmall); or font-size: fontsize('extraSmall');