@each $color-name, $color-value in $colors {
  .#{$color-name} {
    color: #{$color-value};
  }

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

  .bg-#{$color-name} {
    background-color: #{$color-value};
  }

  .hover-bg-#{$color-name}:hover,
  .hover-bg-#{$color-name}:focus {
    background-color: #{$color-value};
  }

  .bc-#{$color-name} {
    border-color: #{$color-value};
  }
}