Skip to content

Instantly share code, notes, and snippets.

@certainlyakey certainlyakey/_colors.scss
Last active Jun 11, 2019

Embed
What would you like to do?
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
You can’t perform that action at this time.