Skip to content

Instantly share code, notes, and snippets.

@SvenPam
Created July 8, 2016 11:26
Show Gist options
  • Save SvenPam/14c0c45d6546d7baa46d8e7f2ecec592 to your computer and use it in GitHub Desktop.
Save SvenPam/14c0c45d6546d7baa46d8e7f2ecec592 to your computer and use it in GitHub Desktop.
Demoing the use of SASS loops to create a gradient coloured list.
li:nth-child(1) {
background-color: #92cc00; }
li:nth-child(2) {
background-color: #6d9900; }
li:nth-child(3) {
background-color: #496600; }
li:nth-child(4) {
background-color: #243300; }
li:nth-child(5) {
background-color: black; }
<ul>
<li>Cow</li>
<li>Dog</li>
<li>Moose</li>
<li>Cat</li>
<li>Goose</li>
</ul>
@for $i from 1 through 5 {
li:nth-child(#{$i}) {
background-color: darken(#BADA33, $i * 10);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment