Created
April 13, 2015 12:25
-
-
Save rcaracaus/40a0c3593dc5c61954b2 to your computer and use it in GitHub Desktop.
Allow for theme specific properties to allow for colour scheming without manual overrides.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
@function map-get-nested($map, $keys...) { | |
@each $key in $keys { | |
@if type-of($map) != 'map' { | |
@return $map; | |
} | |
$map: map-get($map, $key); | |
} | |
@return $map; | |
} | |
@function map-merge-nested($map, $keys-and-value...) { | |
$keys-and-value-length: length($keys-and-value); | |
$key-length: $keys-and-value-length - 1; | |
$value: nth($keys-and-value, $keys-and-value-length); | |
$value-is-map: type-of($value) == 'map'; | |
@if $key-length == 0 { | |
$value: map-merge($map, if($value-is-map or length($value) == 0, $value, ($value: ()))); | |
} @else { | |
@for $i from if($value-is-map, 0, 1) through $key-length { | |
$new: if($i == 0, $value, (nth($keys-and-value, $keys-and-value-length - $i): $value)); | |
$old: if($i == $key-length, $map, map-get-nested($map, slice($keys-and-value, 1, $key-length - $i)...) or ()); | |
$value: if(type-of($old) == 'map', map-merge($old, $new), $new); | |
} | |
} | |
@return $value; | |
} | |
@function get-value($maps, $keys) { | |
$key: nth($keys, 1); | |
$length: length($keys); | |
$value: map-get($maps, $key); | |
@if ($length > 1) { | |
$rest: (); | |
@for $i from 2 through $length { | |
$rest: append($rest, nth($keys, $i)); | |
} | |
@return get-value($value, $rest) | |
} @else { | |
@if $value { | |
@return $value; | |
} @else { | |
@return false; | |
} | |
} | |
} | |
@mixin debug-map($map) { | |
@debug-map { | |
__inspect__: inspect($map); | |
__length__: length($map); | |
__properties__ { | |
@each $key, $value in $map { | |
#{"(" + type-of($value) + ") " + $key}: $value; | |
} | |
} | |
} | |
} | |
$palettes: ( | |
default: ( | |
color-1: green, | |
color-2: yellow | |
), | |
theme-1: ( | |
color-1: red, | |
color-2: pink | |
), | |
theme-2: ( | |
color-1: blue, | |
color-2: purple | |
), | |
); | |
$selectors: () !default; | |
@mixin palette-property($property, $value) { | |
$parent: &; | |
$selectors: map-merge-nested($selectors, ($parent: ($property:$value))) !global; | |
#{$property}: get-value($palettes, default $value); | |
} | |
.my-component { | |
display: block; | |
display: block; | |
display: block; | |
display: block; | |
display: block; | |
content: 'random properties'; | |
@include palette-property(color, color-1); | |
&:hover { | |
@include palette-property(color, color-2); | |
} | |
} | |
.my-component__item { | |
display: block; | |
display: block; | |
display: block; | |
display: block; | |
display: block; | |
content: 'random properties'; | |
@include palette-property(background, color-2); | |
} | |
@each $theme, $palette in $palettes { | |
@if $theme != 'default' { | |
.#{$theme} { | |
@each $selector, $properties in $selectors { | |
#{$selector} { | |
@each $property, $value in $properties { | |
#{$property}: get-value($palettes, $theme $value); | |
} | |
} | |
} | |
} | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.my-component { | |
display: block; | |
display: block; | |
display: block; | |
display: block; | |
display: block; | |
content: 'random properties'; | |
color: green; | |
} | |
.my-component:hover { | |
color: yellow; | |
} | |
.my-component__item { | |
display: block; | |
display: block; | |
display: block; | |
display: block; | |
display: block; | |
content: 'random properties'; | |
background: yellow; | |
} | |
.theme-1 .my-component { | |
color: red; | |
} | |
.theme-1 .my-component:hover { | |
color: pink; | |
} | |
.theme-1 .my-component__item { | |
background: pink; | |
} | |
.theme-2 .my-component { | |
color: blue; | |
} | |
.theme-2 .my-component:hover { | |
color: purple; | |
} | |
.theme-2 .my-component__item { | |
background: purple; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment