title: How to create a dynamic color list with SASS?
body: <p>I want to create a custom color list with SASS.</p>
  
  <pre><code>$color-list: cyan blue;
  $cyan-codes: #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1;
  $blue-codes: #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1;
  
  @for $i from 1 through 6 {
  @each $color in $color-list {
  .color-#{$color}-#{$i*100} {
    color: nth(AAA, $i);
  }
  }
  }
  </code></pre>
  
  <p>Everyting is OK except the <code>color: nth(AAA, $i);</code> part. What should I use instead of AAA to point each color-codes list. It's working if I use <code>color: nth($cyan-codes, $i);</code> but I want to create a dynamic usage to point $cyan-codes, $blue-codes ... etc.</p>
  
  <p>The CSS output is like that:</p>
  
  <pre><code>.color-cyan-100 {
    color: #B2EBF2;
  }
  
  .color-blue-100 {
    color: #B2EBF2;
  }
  
  .color-cyan-200 {
    color: #80DEEA;
  }
  
  .color-blue-200 {
    color: #80DEEA;
  }
  ...
  </code></pre>