Classes and Variables (using Color as an example)

class-var.scss

////////////////////////
// SCSS
////////////////////////
// Define color variables
$red: #e10000;
$orange: #e18700;
$yellow: #e1e100;
$green: #00b400;
$blue: #1e00b4;
$purple: #7800b4;

// Create a key/value list of names and variables
$colors: 'red' $red, 'orange' $orange, 'yellow' $yellow, 'green' $green, 'blue' $blue, 'purple' $purple;

@each $color in $colors {
  // Because $color will contain two items, we need to use the nth() function to pull out which piece we want.
  // The first iteration here, $color is set to: $color: 'red' $red. nth($color, 1) is the string 'red' whereas nth($color, 2) is the value of the variable $red
  .#{nth($color, 1)}-background {
    background-color: nth($color, 2);
  }
}

////////////////////////
// CSS
////////////////////////
.red-background {
  background-color: #e10000;
}

.orange-background {
  background-color: #e18700;
}

.yellow-background {
  background-color: #e1e100;
}

.green-background {
  background-color: #00b400;
}

.blue-background {
  background-color: #1e00b4;
}

.purple-background {
  background-color: #7800b4;
}