Skip to content

Instantly share code, notes, and snippets.

@sugarenia
Created November 22, 2013 09:28
Show Gist options
  • Save sugarenia/7597251 to your computer and use it in GitHub Desktop.
Save sugarenia/7597251 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<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>
// ----
// 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;
}
}
}
.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;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment