Skip to content

Instantly share code, notes, and snippets.

@leonderijke
Created May 15, 2014 11:41
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 leonderijke/0bed824e44364af28ae3 to your computer and use it in GitHub Desktop.
Save leonderijke/0bed824e44364af28ae3 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
// Fork of http://sassmeister.com/gist/8760275 by @jlong
@function slice($list, $start: 1, $end: length($list)) {
$result: ();
@for $i from $start through $end {
$result: append($result, nth($list, $i));
}
@return $result;
}
@function tail($list) {
@return slice($list, 2);
}
@function head($list) {
@return nth($list, 1);
}
//
// map-fetch($map, $keys)
//
// An easy way to fetch a deep value in a multi-level map. Works much like
// map-get() except that you pass multiple keys as the second parameter to
// go down multiple levels in the nested map.
//
@function map-fetch($map, $keys) {
$value: map-get($map, head($keys));
@if (length($keys) > 1) {
@return map-fetch($value, tail($keys));
} @else {
@return $value;
}
}
$config: (
themes: (
mist: (
header: #dcfac0,
content: #00968b,
footer: #85c79c
),
spring: (
header: #f4fac7,
content: #c2454e,
footer: #ffb158
)
)
);
@each $theme in map-keys(map-get($config, themes)) {
.#{$theme} {
.header { background-color: map-fetch($config, themes $theme header ); }
.content { background-color: map-fetch($config, themes $theme content ); }
.footer { background-color: map-fetch($config, themes $theme footer ); }
}
}
.mist .header {
background-color: #dcfac0;
}
.mist .content {
background-color: #00968b;
}
.mist .footer {
background-color: #85c79c;
}
.spring .header {
background-color: #f4fac7;
}
.spring .content {
background-color: #c2454e;
}
.spring .footer {
background-color: #ffb158;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment