Working with lists and @each loops in Sass with the index and nth function

working-with-lists-and-each-loops-in-sass.css

/* Sass-variables template (https://github.com/atelierbram/c-tiles16) 
 * http://codepen.io/atelierbram/pen/cnEpr
 * http://benfrain.com/working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function/

*/
.stuff-1 {
  color: #101718;
  background-color: #8357db;
  border: 1px solid #5a29bd;
}

.stuff-2 {
  color: #1f2a2e;
  background-color: #e830dc;
  border: 1px solid #bd15b2;
}

.stuff-3 {
  color: #364549;
  background-color: #e72357;
  border: 1px solid #b4143e;
}

.stuff-4 {
  color: #48575b;
  background-color: #ff4f1a;
  border: 1px solid #d33100;
}

.stuff-5 {
  color: #607176;
  background-color: #e6970f;
  border: 1px solid #ac710b;
}

working-with-lists-and-each-loops-in-sass.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

/* Sass-variables template (https://github.com/atelierbram/c-tiles16) 
 * http://codepen.io/atelierbram/pen/cnEpr
 * http://benfrain.com/working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function/

*/
$base00: #101718;
$base01: #1f2a2e;
$base02: #364549;
$base03: #48575b;
$base04: #607176;
$base05: #7b8a8e;
$base06: #b8d7e0;
$base07: #f0fbff;
$base08: #e72357;
$base09: #ff4f1a;
$base0a: #e6970f;
$base0b: #19b38a;
$base0c: #17a4cf;
$base0d: #2481f9;
$base0e: #8357db;
$base0f: #e830dc;

$base16-red:     $base08;
$base16-orange:  $base09;
$base16-yellow:  $base0a;
$base16-green:   $base0b;
$base16-cyan:    $base0c;
$base16-blue:    $base0d;
$base16-violet:  $base0e;
$base16-magenta: $base0f;

$background-colors-list: 
  $base16-violet 
  $base16-magenta 
  $base16-red 
  $base16-orange 
  $base16-yellow;

$border-colors-list: 
  scale-color($base16-violet,$lightness: -25%) 
  scale-color($base16-magenta,$lightness: -25%) 
  scale-color($base16-red,$lightness: -25%) 
  scale-color($base16-orange,$lightness: -25%) 
  scale-color($base16-yellow,$lightness: -25%);

$colors-list: 
  $base00 
  $base01 
  $base02 
  $base03 
  $base04;

@for $i from 1 through length($colors-list) {
    .stuff-#{$i} {
        color: nth($colors-list, $i);
        background-color: nth($background-colors-list, $i);
        border: 1px solid nth($border-colors-list, $i);
    }
}