SASS Maps != Source Maps

I’ve seen the phrase “Sass maps” thrown around  the web in recent months, and have made an assumption that people were talking about Source Maps. They both do sound alike, and in fact both these things were part of the same SASS update (3.3.0). It wouldn’t surprise me if there are others out there who’ve experienced this unfortunate confusion and are still in the dark about this.

I  attended SassConf and Sass Maps were quite a popular topic throughout the conference, with good reason–they’re in fact awesome.

So what is a Sass Map exactly?

A Sass map is like a Sass List, except instead of containing just values you have Keys AND Values.

If you are a javscript developer or have ever used js objects you could even think of Sass maps as ‘Sass objects’. Here is what a Sass Map looks like:

$map: (
	key1: value1,
	key2: value2,
	key3: value3
);

… and like a js object you can assign another ‘object’ (Sass Map) to a keys’ value like:

$map: (
	key1: (
		a: b,
		c: d
	),
	key2: value2,
	key3: value3
);

How is a Sass Map used?

Sass Maps are a great way to organize related CSS, they really lend themselves to looping and can help you write less repetitive code.

Retrieve a value from a Sass Map with ‘map-get()’ like this:

$links: (
	link: #900,
	hover: #333,
	visited: #000
);

a {
	color: map-get($links, link);
}

Simple enough, but what about when a keys’ value is a map?

$buttons: (
  search: (
    bg-color: #333,
    icon: "magnifier.svg"
  ),
  alert: (
    bg-color: red,
    icon: "triangle.png"
  ),
  success: (
    bg-color: green,
    icon: "checkmark.svg"
  )
);

@each $button, $buttonProps in $buttons {

	.button-#{ $button } {
		background-color: map-get( $buttonProps , bg-color );
		background-image: url( images/#{map-get($buttonProps, icon)} );
	}

}

… the output:

.button-search {
  background-color: #333;
  background-image: url(images/magnifier.svg);
}

.button-alert {
  background-color: red;
  background-image: url(images/triangle.png);
}

.button-success {
  background-color: green;
  background-image: url(images/checkmark.svg);
}

Let’s look at this bit:

	@each $button, $buttonProps in $buttons

Those 3 variables contain:

$button = the top level key names ( search, alert and success )

$buttonProps = the map of each key ( background-color: … , background-image: … )

$buttons = the main map we are getting our values from

You can use as many maps in a map as you want, although things can start getting kinda messy with map-get():

$map:(
  a: (
    b: (
      c: (
        key: red
      )
    )
  )
);

@each $x, $props in $map {

	.red {
	    color: map-get( map-get( map-get( $props, b ) , c ) , key );
	}

}

That seems like an unlikely scenario, but it is possible if you do have a use for it.

Sass Maps can be very useful things if used correctly – how you want to leverage them is up to whatever works best for you and your team.

Read more about Sass Maps.

If you actually have been using Sass Maps in your project please share in the comments below, we’d love to know your use cases!

Leave a Reply

Your email address will not be published. Required fields are marked *