Generated by SassMeister.com.

SassMeister-input-HTML.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>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$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: 20px;
  font-size: 0; // take care of inline-block whitespace
  
  li {
    width: 30px;
    height: 30px;
    display: inline-block;
    
    &:first-child {
      border-radius: 4px 0 0 4px;
    }
    &:last-child {
      border-radius: 0 4px 4px 0;
    }
  }
}

SassMeister-output.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: 30px;
  height: 30px;
  display: inline-block;
}
.theme li:first-child {
  border-radius: 4px 0 0 4px;
}
.theme li:last-child {
  border-radius: 0 4px 4px 0;
}

SassMeister-rendered.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>