_colors-alphabet.scss

// Colors Alphabet
//

$alphabet: "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z";
$alpha-base-color:  hsl(0, 30%, 80%);
$alpha-spinner: 13.846; // hue (360) / number of letters (26)

$numbers: "0", "1", "2", "3", "4", "5", "6", "7", "8", "9";
$number-base-color: hsl(0, 0%, 94%);
$number-increment: 8;


@each $letter in $alphabet {
  $i: index($alphabet, $letter);
  .bg-#{$letter} { background-color: adjust-hue($alpha-base-color, $alpha-spinner*$i);  }
}

@each $number in $numbers {
  $i: index($numbers, $number);
  .bg-#{$number} { background-color: darken($number-base-color, $number-increment*$i);  }
}