---
title: Removing Sass Duplication Using Sass Maps
teaser: How Sass maps empower you to write less code.
tags: sass,good code,design
author: Kyle Fiedler
published_on: 2014-04-04
---

Recently Dan asked me to get new icons for [Raleigh], [New York City], and
[Austin] added to some of our landing pages.

![Original Icons]

Once I created the icons, I checked out the site to put them in below the
offices that have already been on the marketing pages. It looked like this:

```scss
&#boston:after {
  background: url('/img/icon_boston.png') no-repeat center top;
}

&#denver:after {
  background: url('/img/icon_denver.png') no-repeat center 42px;
}

&#sanfran:after {
  background: url('/img/icon_sf.png') no-repeat center 54px;
}

&#philly:after {
  background: url('/img/icon_philly.png') no-repeat center 42px;
}

&#stockholm:after {
  background: url('/img/icon_stockholm.png') no-repeat center 45px;
}

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  &#boston:after {
    background: url('/img/icon_boston@2x.png') no-repeat center top;
    background-size: 97px 112px;
  }

  &#denver:after {
    background: url('/img/icon_denver@2x.png') no-repeat center 42px;
    background-size: 160px 71px;
  }

  &#sanfran:after {
    background: url('/img/icon_sf@2x.png') no-repeat center 54px;
    background-size: 210px 59px;
  }

  &#philly:after {
    background: url('/img/icon_philly@2x.png') no-repeat center 42px;
    background-size: 66px 85px;
  }

  &#stockholm:after {
    background: url('/img/icon_stockholm@2x.png') no-repeat center 45px;
    background-size: 93px 67px;
  }
}
```

Look at all that repetition! That's almost 50 lines of Sass. Adding new offices
to that list would add even more to the repetition. I wanted to get rid of all
the repetition and make it really easy to add new offices if we need to in the
future. I started off by putting all our offices in a variable then looped
through them and used some interpolation to assign the right icon to the right
city.

```scss
$offices: boston, denver, sanfran, philly, stockholm, new-york, raleigh, austin;

@each $city in $offices  {
  &##{$city}:after {
    background-image: url('/img/icon_#{$city}.png');
    background-position: center 42px;
    background-repeat: no-repeat;

    @if $city == 'boston' {
      background-position: center top;
    }

    @if $city == 'new-york' {
      background-position: center top;
    }

    @if $city == 'sanfran' {
      background-position: center 54px;
    }

    @if $city == 'austin' {
      background-position: center 24px;
    }

    @if $city == 'raleigh' {
      background-position: center 28px;
    }
  }

  @include hirez-screen {
    &##{$city}:after {
      background-image: url('/img/icon_#{$city}@2x.png');
      background-size: 97px 112px;
    }
  }
}
```

There's still some repetition in that loop with different positioning for each
of the icons. Each of the cities that I am overriding the position is getting
two lines of positioning when one will do. I figured that there had to be a
better way to handle to the differing positions in Sass too.

Luckily for me, [Sass 3.3] was released with [Sass maps] while I was designing
the new icons. [Connie] suggested I try putting the offices into a map with
their respective y-position. I went back to my list of offices and converted it
to a map.

```scss
$offices: (boston: top, denver: 42px, sanfran: 54px, philly: 42px, stockholm: 42px, new-york: top, raleigh: 28px, austin: 24px);
```

Then went back to my @each loop and changed it around to account for the map.

```scss
@each $city, $y-position in $offices  {
  &##{$city}:after {
    background-image: url('/img/icon_#{$city}.png');
    background-position: center $y-position;
    background-repeat: no-repeat;
  }

  @include hirez-screen {
    &##{$city}:after {
      background-image: url('/img/icon_#{$city}@2x.png');
      background-size: 97px 112px;
    }
  }
}
```

Now we're talking. It's really compact and there's [no repetition].

![New Icons]

[Raleigh]: https://thoughtbot.com/blog/thoughtbot-comes-to-the-research-triangle
[New York City]: https://thoughtbot.com/blog/thoughtbot-opens-in-nyc
[Austin]: https://thoughtbot.com/blog/opening-an-austin-office
[Connie]: https://twitter.com/conchan
[Sass 3.3]: http://blog.sass-lang.com/posts/184094-sass-33-is-released
[Sass maps]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps
[Original Icons]: https://images.thoughtbot.com/dry-sass/original.png
[New Icons]: https://images.thoughtbot.com/dry-sass/new.png
[no repetition]: http://en.wikipedia.org/wiki/Dont_repeat_yourself