A Pen by Tom Bamford.

index.markdown

• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere
• Link to somewhere

style.scss

@import "compass/css3";

// Black.
$color-black: #000000;

// Blues.
$color-botticelli: #d9e9ef;
$color-picton-blue: #52b1ea;
$color-lochmara: #077dc3;
$color-teal-blue: #064771;
$color-boston-blue: #3b7fc4;
$color-deep-sky-blue: rgb(0,159,238);

// Oranges.
$color-hot-cinnamon: #e4621c;
$color-tacao: #efa47b;

// Greens.
$color-apple: #4a993e;
$color-la-palma: rgb(63,160,51);
$color-tropical-rain-forest: rgb(0,120,92);

// Reds.
$color-well-read: #b33630;
$color-carmine: rgb(160,0,44);

// Yellows.
$color-wattle: #d6d22e;
$color-golden-poppy: rgb(242,199,0);

// Greys.
$color-alto: #ddd;
$color-nevada: #6a7076;
$color-mine-shaft: #222222;
$color-grey: rgb(119,119,119);
$color-dark-grey: rgb(179,179,179);
$color-white-smoke: rgb(242,242,242);

// Whites.
$color-white: #fff;

// Define array of colours to be used for list item background
$bg-colours: $color-deep-sky-blue, $color-la-palma, $color-tropical-rain-forest, $color-grey, $color-carmine, $color-golden-poppy;

@for $i from 1 through length($bg-colours) {
  li:nth-child(#{length($bg-colours)}n+#{$i}) {
		background: nth($bg-colours, $i);
     	a {
     		@if nth($bg-colours, $i) == $color-golden-poppy {
        		color: $color-black;
          }
          @else {
          	color: $color-white;
				}
      }
	}
}
li {
  padding: 1em;
  margin: 0.5em;
  list-style: none;
  float: left;
}

vpEkD.markdown

vpEkD

A Pen by Tom Bamford on CodePen.

License.