support-foo/web

$colors: (
  "white":        $white,
  "gray-darker":  $gray-darker,
  "gray-dark":    $gray-dark,
  "gray":         $gray,
  "gray-light":   $gray-light,
  "gray-lighter": $gray-lighter,
  "black":        $black,
  "blue":         $blue,
  "red":          $red,
  "green":        $green,
  "yellow":       $yellow
);

@each $color, $hex in $colors {
  .#{$color}        { color: $hex }
  .bg-#{$color}     { background-color: $hex }
  .border-#{$color} { border-color: $hex }
  .fill-#{$color}   { fill: $hex }

  .#{$color}-hover:hover        { color: $hex }
  .bg-#{$color}-hover:hover     { background-color: $hex }
  .border-#{$color}-hover:hover { border-color: $hex }
  .fill-#{$color}-hover:hover   { fill: $hex }

  .#{$color}-focus:focus        { color: $hex }
  .bg-#{$color}-focus:focus     { background-color: $hex }
  .border-#{$color}-focus:focus { border-color: $hex }
  .fill-#{$color}-focus:focus   { fill: $hex }
}