Skip to content

Instantly share code, notes, and snippets.

@matiassingers
Last active December 21, 2015 08:28
Show Gist options
  • Save matiassingers/6277883 to your computer and use it in GitHub Desktop.
Save matiassingers/6277883 to your computer and use it in GitHub Desktop.
SASS looping over colors creating nth-child selectors
li
$colors: rgb(230,196,19), rgb(233,171,48), rgb(222,65,56), rgb(158,48,49), rgb(64,13,45), rgb(120,40,109), rgb(188,33,135)
$num: 0
@each $color in $colors
$num: $num + 1
&:nth-child(#{$num})
background-color: $color
li:nth-child(1) {
background-color: #e6c413;
}
li:nth-child(2) {
background-color: #e9ab30;
}
li:nth-child(3) {
background-color: #de4138;
}
li:nth-child(4) {
background-color: #9e3031;
}
li:nth-child(5) {
background-color: #400d2d;
}
li:nth-child(6) {
background-color: #78286d;
}
li:nth-child(7) {
background-color: #bc2187;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment