New SassScript Maps in Sass 3.3, based on this article: http://blog.sugarenia.com/archives/web-design/sass-sundays-easy-theme-tiles-using-sass-maps-lists

theme-list-rendered.html

<ul class="theme theme--crisp">
  <li><span>#313340</span></li>
  <li><span>#f0f0e3</span></li>
  <li><span>#f9c27b</span></li>
  <li><span>#ef8531</span></li>
  <li><span>#f36519</span></li>
</ul>

<ul class="theme theme--funky">
  <li><span>#da0054</span></li>
  <li><span>#ff692b</span></li>
  <li><span>#fbd726</span></li>
  <li><span>#009e8f</span></li>
  <li><span>#62b240</span></li>
</ul>

<ul class="theme theme--autumn">
  <li><span>#f6484f</span></li>
  <li><span>#fbe4b1</span></li>
  <li><span>#a9c886</span></li>
  <li><span>#417455</span></li>
  <li><span>#1d4148</span></li>
</ul>

theme-list.css

.theme--crisp li:nth-child(1) {
  background: #313340;
}

.theme--crisp li:nth-child(2) {
  background: #f0f0e3;
}

.theme--crisp li:nth-child(3) {
  background: #f9c27b;
}

.theme--crisp li:nth-child(4) {
  background: #ef8531;
}

.theme--crisp li:nth-child(5) {
  background: #f36519;
}

.theme--funky li:nth-child(1) {
  background: #da0054;
}

.theme--funky li:nth-child(2) {
  background: #ff692b;
}

.theme--funky li:nth-child(3) {
  background: #fbd726;
}

.theme--funky li:nth-child(4) {
  background: #009e8f;
}

.theme--funky li:nth-child(5) {
  background: #62b240;
}

.theme--autumn li:nth-child(1) {
  background: #f6484f;
}

.theme--autumn li:nth-child(2) {
  background: #fbe4b1;
}

.theme--autumn li:nth-child(3) {
  background: #a9c886;
}

.theme--autumn li:nth-child(4) {
  background: #417455;
}

.theme--autumn li:nth-child(5) {
  background: #1d4148;
}

.theme {
  margin-bottom: 20px;
  font-size: 0;
}
.theme li {
  width: 60px;
  height: 60px;
  display: inline-block;
}
.theme li:first-child {
  border-radius: 4px 0 0 4px;
}
.theme li:last-child {
  border-radius: 0 4px 4px 0;
}

theme-list.html

<ul class="theme theme--crisp">
  <li>#313340</li>
  <li>#f0f0e3</li>
  <li>#f9c27b</li>
  <li>#ef8531</li>
  <li>#f36519</li>
</ul>

<ul class="theme theme--funky">
  <li>#da0054</li>
  <li>#ff692b</li>
  <li>#fbd726</li>
  <li>#009e8f</li>
  <li>#62b240</li>
</ul>

<ul class="theme theme--autumn">
  <li>#f6484f</li>
  <li>#fbe4b1</li>
  <li>#a9c886</li>
  <li>#417455</li>
  <li>#1d4148</li>
</ul>

theme-list.scss

// ----
// Sass (v3.3.14)
// Compass (vundefined)
// ----

$themes: (
  crisp: #313340 #f0f0e3 #f9c27b #ef8531 #f36519,
  funky: #da0054 #ff692b #fbd726 #009e8f #62b240,
  autumn: #f6484f #fbe4b1 #a9c886 #417455 #1d4148
);

@each $theme, $colours in $themes {
  @for $i from 1 through length($colours) {
    $colour: nth($colours, $i);
    
    .theme--#{$theme} li:nth-child(#{$i}) {
      background: $colour;
    }
  }
}

.theme {
  margin-bottom: 60px;
  font-size: 0; // take care of inline-block whitespace
  
  li {
    width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
    
    &:first-child {
      border-radius: 8px 0 0 8px;
    }
    &:last-child {
      border-radius: 0 8px 8px 0;
    }
    
    span {
      position: absolute;
      color: #000;
      bottom: -30px;
      left: 10px;
      font-size: 18px;
    }
  }
}

body {padding: 20px;}

undefined

.theme--crisp li:nth-child(1) {
  background: #313340;
}

.theme--crisp li:nth-child(2) {
  background: #f0f0e3;
}

.theme--crisp li:nth-child(3) {
  background: #f9c27b;
}

.theme--crisp li:nth-child(4) {
  background: #ef8531;
}

.theme--crisp li:nth-child(5) {
  background: #f36519;
}

.theme--funky li:nth-child(1) {
  background: #da0054;
}

.theme--funky li:nth-child(2) {
  background: #ff692b;
}

.theme--funky li:nth-child(3) {
  background: #fbd726;
}

.theme--funky li:nth-child(4) {
  background: #009e8f;
}

.theme--funky li:nth-child(5) {
  background: #62b240;
}

.theme--autumn li:nth-child(1) {
  background: #f6484f;
}

.theme--autumn li:nth-child(2) {
  background: #fbe4b1;
}

.theme--autumn li:nth-child(3) {
  background: #a9c886;
}

.theme--autumn li:nth-child(4) {
  background: #417455;
}

.theme--autumn li:nth-child(5) {
  background: #1d4148;
}

.theme {
  margin-bottom: 60px;
  font-size: 0;
}
.theme li {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
}
.theme li:first-child {
  border-radius: 8px 0 0 8px;
}
.theme li:last-child {
  border-radius: 0 8px 8px 0;
}
.theme li span {
  position: absolute;
  color: #000;
  bottom: -30px;
  left: 10px;
  font-size: 18px;
}

body {
  padding: 20px;
}