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

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:

& #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.

$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.

$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.

@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.