A mixin that applies colors from a map

_colors.scss

$colors-by-name: (
  dove-gray: #666666,
  mine-shaft: #333333,
  denim: #0f6bac,
  niagara: #0fb3ac,
  // ...
);

$colors-by-function: (
  buttons: (
    primary-button: (
      background-color: map-get($colors-by-name, dove-gray),
      border-color: map-get($colors-by-name, denim),
      hover: (
        background-color: map-get($colors-by-name, mine-shaft),
        border-color: map-get($colors-by-name, niagara),
      )
    ),
    secondary-button: (
      // ...
    )
  )
);

_mixins.scss

// A mixin for applying colors from a map
// Usage: u-generate-color-style('buttons', 'primary-button');
@mixin u-generate-color-style($group-name, $style-name, $colors: $colors-by-function) {
  $group: map-get($colors, $group-name);
  $properties: map-get($group, $style-name);
  @each $property, $value in $properties {
    @if type-of($value) == 'map' {
      $subproperties: $value;
      @if $property == 'hover' {
        &:hover, &:focus {
          @each $subproperty, $subvalue in $subproperties {
            #{$subproperty}: $subvalue;
          }
        }
      }
    } @else {
      #{$property}: $value;
    }
  }
}