-
-
Save KatieK2/8012014 to your computer and use it in GitHub Desktop.
Easy theme tiles using Sass maps & lists - view live at http://sassmeister.com/gist/8012014. Forked from http://blog.sugarenia.com/archives/web-design/sass-sundays-easy-theme-tiles-using-sass-maps-lists.
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
<ul class="theme theme--crisp"> | |
<li>#313340</li> | |
<li>#f0f0e3</li> | |
<li>#f9c27b</li> | |
<li>#ef8531</li> | |
<li>#f36519</li> | |
</ul> | |
<ul class="theme theme--funky"> | |
<li>#da0054</li> | |
<li>#ff692b</li> | |
<li>#fbd726</li> | |
<li>#009e8f</li> | |
<li>#62b240</li> | |
</ul> | |
<ul class="theme theme--autumn"> | |
<li>#f6484f</li> | |
<li>#fbe4b1</li> | |
<li>#a9c886</li> | |
<li>#417455</li> | |
<li>#1d4148</li> | |
</ul> |
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
<ul class="theme theme--crisp"> | |
<li>#313340</li> | |
<li>#f0f0e3</li> | |
<li>#f9c27b</li> | |
<li>#ef8531</li> | |
<li>#f36519</li> | |
</ul> | |
<ul class="theme theme--funky"> | |
<li>#da0054</li> | |
<li>#ff692b</li> | |
<li>#fbd726</li> | |
<li>#009e8f</li> | |
<li>#62b240</li> | |
</ul> | |
<ul class="theme theme--autumn"> | |
<li>#f6484f</li> | |
<li>#fbe4b1</li> | |
<li>#a9c886</li> | |
<li>#417455</li> | |
<li>#1d4148</li> | |
</ul> |
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--crisp li:nth-child(1) { | |
background: #313340; | |
} | |
.theme--crisp li:nth-child(2) { | |
background: #f0f0e3; | |
} | |
.theme--crisp li:nth-child(3) { | |
background: #f9c27b; | |
} | |
.theme--crisp li:nth-child(4) { | |
background: #ef8531; | |
} | |
.theme--crisp li:nth-child(5) { | |
background: #f36519; | |
} | |
.theme--funky li:nth-child(1) { | |
background: #da0054; | |
} | |
.theme--funky li:nth-child(2) { | |
background: #ff692b; | |
} | |
.theme--funky li:nth-child(3) { | |
background: #fbd726; | |
} | |
.theme--funky li:nth-child(4) { | |
background: #009e8f; | |
} | |
.theme--funky li:nth-child(5) { | |
background: #62b240; | |
} | |
.theme--autumn li:nth-child(1) { | |
background: #f6484f; | |
} | |
.theme--autumn li:nth-child(2) { | |
background: #fbe4b1; | |
} | |
.theme--autumn li:nth-child(3) { | |
background: #a9c886; | |
} | |
.theme--autumn li:nth-child(4) { | |
background: #417455; | |
} | |
.theme--autumn li:nth-child(5) { | |
background: #1d4148; | |
} | |
.theme { | |
margin-bottom: 20px; | |
font-size: 0; | |
} | |
.theme li { | |
width: 30px; | |
height: 30px; | |
display: inline-block; | |
} | |
.theme li:first-child { | |
border-radius: 4px 0 0 4px; | |
} | |
.theme li:last-child { | |
border-radius: 0 4px 4px 0; | |
} |
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.3.0.rc.1) | |
// Compass (v0.13.alpha.10) | |
// ---- | |
$themes: ( | |
crisp: #313340 #f0f0e3 #f9c27b #ef8531 #f36519, | |
funky: #da0054 #ff692b #fbd726 #009e8f #62b240, | |
autumn: #f6484f #fbe4b1 #a9c886 #417455 #1d4148 | |
); | |
@each $theme, $colours in $themes { | |
@for $i from 1 through length($colours) { | |
$colour: nth($colours, $i); | |
.theme--#{$theme} li:nth-child(#{$i}) { | |
background: $colour; | |
} | |
} | |
} | |
.theme { | |
margin-bottom: 20px; | |
font-size: 0; // take care of inline-block whitespace | |
li { | |
width: 30px; | |
height: 30px; | |
display: inline-block; | |
&:first-child { | |
border-radius: 4px 0 0 4px; | |
} | |
&:last-child { | |
border-radius: 0 4px 4px 0; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment