Skip to content

Instantly share code, notes, and snippets.

@garmjs
Created June 25, 2015 22:15
Show Gist options
  • Save garmjs/1a44368894bcbcab8211 to your computer and use it in GitHub Desktop.
Save garmjs/1a44368894bcbcab8211 to your computer and use it in GitHub Desktop.
themify
// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----
$themes: (
"theme-1": (
"color": red
),
"theme-2": (
"color": orange
),
"theme-3": (
"color": yellow
),
"theme-4": (
"color": green
),
"theme-5": (
"color": blue
)
);
@function map-fetch($map, $keys) {
$key: nth($keys, 1);
$length: length($keys);
$value: map-get($map, $key);
@if $value != null {
@if $length > 1 {
$rest: ();
@for $i from 2 through $length {
$rest: append($rest, nth($keys, $i))
}
@return map-fetch($value, $rest);
} @else {
@return $value;
}
} @else {
@return false;
}
}
@mixin themify ($themes: $themes) {
@each $theme, $map in $themes {
.#{$theme} & {
// Define theme color
$theme-color: map-fetch($themes, $theme "color") !global;
// ... other vars to use
@content;
// Reset theme color to null
$theme-color: null !global;
}
}
}
.test {
@include themify() {
color: $theme-color;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment