Skip to content

Instantly share code, notes, and snippets.

@lharby
Created June 25, 2015 09:08
Show Gist options
  • Save lharby/c1003d70640798523939 to your computer and use it in GitHub Desktop.
Save lharby/c1003d70640798523939 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
</ul>
// ----
// libsass (v3.2.5)
// ----
$colors: red, orange, yellow, green, blue, purple;
$repeat: 20;
@for $i from 1 through $repeat {
li:nth-child(#{length($colors)}n+#{$i}) {
background: lighten(nth($colors, random(length($colors))), 20%);
}
}
li {
list-style: none;
padding: 1em;
}
li:nth-child(6n+1) {
background: #ffff66;
}
li:nth-child(6n+2) {
background: #e600e6;
}
li:nth-child(6n+3) {
background: #ffff66;
}
li:nth-child(6n+4) {
background: #6666ff;
}
li:nth-child(6n+5) {
background: #ff6666;
}
li:nth-child(6n+6) {
background: #ffff66;
}
li:nth-child(6n+7) {
background: #ff6666;
}
li:nth-child(6n+8) {
background: #00e600;
}
li:nth-child(6n+9) {
background: #ff6666;
}
li:nth-child(6n+10) {
background: #6666ff;
}
li:nth-child(6n+11) {
background: #6666ff;
}
li:nth-child(6n+12) {
background: #ffff66;
}
li:nth-child(6n+13) {
background: #ff6666;
}
li:nth-child(6n+14) {
background: #00e600;
}
li:nth-child(6n+15) {
background: #e600e6;
}
li:nth-child(6n+16) {
background: #ffc966;
}
li:nth-child(6n+17) {
background: #00e600;
}
li:nth-child(6n+18) {
background: #6666ff;
}
li:nth-child(6n+19) {
background: #6666ff;
}
li:nth-child(6n+20) {
background: #ff6666;
}
li {
list-style: none;
padding: 1em;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment