title: Random color from array in Sass
body: <p>I want to specify an array of colours and then apply the colors randomly to a list.</p>
  
  <p>So far I have it so that the colors will cycle through in order. </p>
  
  <p>How can I randomise it?</p>
  
  <p>Here is the Sass code so far:</p>
  
  <pre><code>$colors: red, orange, yellow, green, blue, purple;
  
  @for $i from 1 through length($colors) {
      li:nth-child(#{length($colors)}n+#{$i}) {
          background: lighten(nth($colors, $i), 20%);
      }
  }
  
  li {
    list-style: none;
    padding: 1em;
  }
  </code></pre>
  
  <p>and the markup:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;a&lt;/li&gt;
    &lt;li&gt;b&lt;/li&gt;
    &lt;li&gt;c&lt;/li&gt;
    &lt;li&gt;d&lt;/li&gt;
    &lt;li&gt;e&lt;/li&gt;
    &lt;li&gt;f&lt;/li&gt;
    &lt;li&gt;g&lt;/li&gt;
    &lt;li&gt;h&lt;/li&gt;
    &lt;li&gt;i&lt;/li&gt;
    &lt;li&gt;j&lt;/li&gt;
    &lt;li&gt;k&lt;/li&gt;
    &lt;li&gt;l&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Example on Codepen:
  <a href="http://codepen.io/anon/pen/azbwJm" rel="noreferrer">http://codepen.io/anon/pen/azbwJm</a></p>