Skip to content

Instantly share code, notes, and snippets.

@jonpitch
Last active April 2, 2016 13:45
Show Gist options
  • Save jonpitch/904952bb77aa226601f5a2438e118d2b to your computer and use it in GitHub Desktop.
Save jonpitch/904952bb77aa226601f5a2438e118d2b to your computer and use it in GitHub Desktop.
Ember Theming - SASS
// theme map
$themes: (
default: (
first: (
primary: #58b15f,
secondary: #e3f0d8
),
second: (
primary: #287f6e,
secondary: #83e5d2
)
)
);
// if theme service exists as addon - allow 3rd parties to merge into themes.
@if variable-exists(theme-additional) {
$themes: map-merge($themes, $theme-additional);
}
@mixin apply-theme() {
@each $base, $attributes in $themes {
@each $section, $values in $attributes {
$name: "#{$base}-#{$section}";
&[data-theme="#{$name}"] {
}
}
}
}
// helper for SASS files to apply theme values to an element.
// usage: @include theme('color', 'primary');
@mixin theme($cssAttribute, $themeValue) {
@each $base, $attributes in $themes {
@each $section, $values in $attributes {
$name: "#{$base}-#{$section}";
&[data-theme="#{$name}"] {
@if $cssAttribute == "background" and $themeValue == "bg-image" {
$url: map-get($values, $themeValue);
#{$cssAttribute}: url($url) repeat-x;
} @else if $cssAttribute == "background" and $themeValue == "icon" {
$url: map-get($values, $themeValue);
#{$cssAttribute}: url($url) no-repeat;
} @else {
#{$cssAttribute}: map-get($values, $themeValue) !important;
}
// ...
}
}
}
}
// helper for more advanced theming.
// usage: @include theme-advanced('border', '', 'accent', '1px solid');
@mixin theme-advanced($cssAttribute, $before, $themeValue, $after) {
@each $base, $attributes in $themes {
@each $section, $values in $attributes {
$name: "#{$base}-#{$section}";
&[data-theme="#{$name}"] {
#{$cssAttribute}: #{$before} map-get($values, $themeValue) #{$after};
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment