When I first had to figure out how to use key/value maps in SCSS I recall it was a pain and involved more research than I enjoyed. To this day I still forget the syntax when I need it. Lists are easier, but I figured I'd just document both here.


Making a list is as easy as listing values separated by spaces. No special syntax.

$some-list: 100px 200px 300px 400px;

It also seems you can store strings, without needing quotes or any string-specific syntax:

$animals: dog cat wombat;

You can iterate a list like so:

@each $animal in $animals {
	.#{$animal} {
		margin: 20px;

Which in this case generates the following CSS:

.dog {
  margin: 20px;

.cat {
  margin: 20px;

.wombat {
  margin: 20px;

I find it odd that the Sass compiler doesn't optimize this contrived example further by merging the three selectors into a single comma delimited selector, but whatevs.

Maps (key/value pairs)

Maps require a bit of additional syntax. Creating a map looks similar to a JS object literal, but with curly brackets swapped for parenthesis. Explaining it like that, I don't know how I ever forget.

$some-map: (
	small:  12px,
	medium: 24px,
	large:  36px

Note that you can also reference other SCSS variables to use as values if needed.

You can iterate a map like so:

@each $key, $value in $some-map {
	.padding-#{$key} {
		padding: $value;

Which generates the following CSS:

.padding-small {
  padding: 12px;

.padding-medium {
  padding: 24px;

.padding-large {
  padding: 36px;