Sweet SASS Maps – SASS 3.3 introduces hashes

SASS 3.3, released March 2014, came with an amazing new feature – maps aka hashes aka key/value lists. These worked beautifully to clean up a CSS file that was repeating the same code ad infinitum to provide a different background image for all of the different pages/sections in a site I’m working on.

Maps changed this:

#page.arena {
  background-image: url(/assets/kids/sections/backgrounds/arena.png); 
}

#page.farm {
  background-image: url(/assets/kids/sections/backgrounds/farm.png); 
}

#page.campfire {
  background-image: url(/assets/kids/sections/backgrounds/campfire.png); 
}

#page.campsite {
  background-image: url(/assets/kids/sections/backgrounds/campsite.png); 
}

#page.cave {
  background-image: url(/assets/kids/sections/backgrounds/cave.png); 
}

#page.cooking {
  background-image: url(/assets/kids/sections/backgrounds/cooking.png); 
}

#page.grocery {
  background-image: url(/assets/kids/sections/backgrounds/grocery.png); 
}

#page.library {
  background-image: url(/assets/kids/sections/backgrounds/library.png); 
}

#page.playground {
  background-image: url(/assets/kids/sections/backgrounds/playground.png); 
}

#page.pyramid {
  background-image: url(/assets/kids/sections/backgrounds/pyramid.png); 
}

#page.sandbox {
  background-image: url(/assets/kids/sections/backgrounds/sandbox.png); 
}

#page.my_home {
  background-image: url(/assets/kids/sections/backgrounds/my-home.png); 
}

To this:

$pages: (
  arena:      "arena.png",
  farm:       "farm.png",
  campfire:   "campfire.png",
  campsite:   "campsite.png",
  cave:       "cave.png",
  cooking:    "cooking.png",
  grocery:    "grocery.png",
  library:    "library.png",
  playground: "playground.png",
  pyramid:    "pyramid.png",
  sandbox:    "sandbox.png",
  my_home:    "my-home.png"
);

@each $class, $image in $pages {
  #page.#{$class} {
    background-image: url(/assets/kids/sections/backgrounds/#{$image}); 
  }
}

Awesome! Read about it here: http://thesassway.com/news/sass-3-3-released

May 12, 2014

Sweet SASS Maps – SASS 3.3 introduces hashes