Loops in SASS

loop._scss

// =============================================
// Background and Colors
// =============================================
@mixin background($color, $value) {
  .bg-#{$color} {
    background: $value;
  }
}
@mixin color($color, $value) {
  .color-#{$color} {
    color: $value;
  }

  .color-hover-#{$color} {
    &:hover,
    &:active,
    &:focus {
      color: $value;
    }
  }

}

$colors: (white : $white, black : $black, gray : $gray, gray-light : $gray-light, gray-dark: $gray-dark);
@each $color, $value in $colors  {
  @include background($color, $value);
  @include color($color, $value);
}