Skip to content

Instantly share code, notes, and snippets.

@drinchev
Created December 12, 2014 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drinchev/6c98a7f9c009fe45d596 to your computer and use it in GitHub Desktop.
Save drinchev/6c98a7f9c009fe45d596 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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;
}
}
.theme-1 .test {
color: red;
}
.theme-2 .test {
color: orange;
}
.theme-3 .test {
color: yellow;
}
.theme-4 .test {
color: green;
}
.theme-5 .test {
color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment