Last active
November 13, 2015 09:41
-
-
Save feoche/487085b35d3b63e6441a to your computer and use it in GitHub Desktop.
[Sass] Theming Generation Mixin (based on each property)
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
.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; | |
} |
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
$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