A mixin that applies colors from a map
$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: ( | |
// ... | |
) | |
) | |
); |
// 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; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment