Skip to content

Instantly share code, notes, and snippets.

@akmil
Last active January 31, 2020 14:40
Show Gist options
  • Save akmil/d036474c6de60cf5141692ad471306ae to your computer and use it in GitHub Desktop.
Save akmil/d036474c6de60cf5141692ad471306ae to your computer and use it in GitHub Desktop.
$themes-names: (
primary: (
background: $white,
color: $dark-grey,
font-size: 18px,
),
dark: (
background: $dark,
font-size: 10px,
)
);
$primaryName: "primary";
$darkName: "dark";
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@mixin print($declarations) {
@each $property, $value in $declarations {
#{$property}: $value
}
}
@mixin wrappedTheme($declarations) {
@each $theme, $value in $declarations {
$selector: "&.theme-#{$theme}";
#{$selector} {
@include print(map-deep-get($themes-names, $theme));
}
}
}
$color-default: map-deep-get($themes-names, "primary", "color");
.button-themed {
@extend %button;
/* generate &.theme-primary{...} and &.theme-dark{...} */
@include wrappedTheme($themes-names);
/*override*/
&.theme-#{$darkName} {
border: 5px solid $color-default;
color: $white;
}
/* can override/extend specific theme --modifier */
&.theme-#{$primaryName}--modifier {
@include print(map-deep-get($themes-names, $primaryName));
/* will add all from: $themes-names[$primaryName]
/---
background: $white,
color: $dark-grey,
font-size: 18px,
*/
font-size: 22px;
}
color: $color-default;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment