Skip to content

Instantly share code, notes, and snippets.

@feoche
Last active November 13, 2015 09:41
Show Gist options
  • Save feoche/487085b35d3b63e6441a to your computer and use it in GitHub Desktop.
Save feoche/487085b35d3b63e6441a to your computer and use it in GitHub Desktop.
[Sass] Theming Generation Mixin (based on each property)
.theme-original li {
background: #9C9C9C;
color: #dc8005;
border-color: #0387ba;
}
.theme-blue li {
background: #9C9C9C;
color: #04acec;
border-color: #0387ba;
}
.theme-pineberry li {
background: #fff;
color: #E30B39;
border-color: #E30B39;
}
.theme-muddy li {
background: #9C9C9C;
color: #00BD75;
border-color: #00BD75;
}
.theme-raspberry li {
background: #fff;
color: #fff;
border-color: #E30B39;
}
$themes: original blue pineberry muddy raspberry;
$mainbackground: #9C9C9C #9C9C9C #fff #9C9C9C #fff;
$menuforeground: #dc8005 #04acec #E30B39 #00BD75 #fff;
$menubackground: #333333 #222222 #FEFEE2 #13100c #b2092d;
$tabtitle: #333333 #333333 #E30B39 #333333 #E30B39;
$tabactivebackground: #d9d9d9 #d9d9d9 #fff #d9d9d9 #d9d9d9;
$text: #666666 #666666 #666666 #666666 #666666;
$linkforeground: #fff #fff #222222 #fff #fff;
$linkbackground: #0387ba #0387ba #E30B39 #00BD75 #E30B39;
@mixin theme-item($properties, $theming-properties) {
@for $i from 1 through length($themes) {
.theme-#{nth($themes, $i)} & {
@for $j from 1 through length($properties) {
#{nth($properties, $j)} : nth(nth($theming-properties, $j), $i);
}
}
}
}
li {
@include theme-item(background color border-color, $mainbackground $menuforeground $linkbackground);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment