Q:

Using function random() with sass to choose random variables

I have the following variables in my scss file
$flat-blue: #42a5f5;
$flat-green: #26a69a;
$flat-orange: #ffa727;
$flat-red: #ef5350;
$flat-purple: #c561d6;

I found a codepen here that change a random value between two numbers, and it seems to work nicely.
My doubt is, is there a way to use this function random to choose one of my variables ?
my css:
.avatar {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    position: relative;
    background: $flat-green; //here should be the result of this function
    float: left;
    text-align: center;
    line-height: 43px;
    font-size: 20px;
    color:white;
    font-weight: lighter;
    text-transform: uppercase;
  }

my html structure: 
<article data-value="<%= subscriber[:id] %>"
       data-status="<%= subscriber[:status] %>"
       data-user="<%= subscriber[:subscriber][:user_id] %>"
       data-profile="<%= subscriber[:profile_id] %>">
<div class="bg">
    <div class="avatar">
        <%= avatar_url(subscriber.profile.user.avatar, subscriber[:subscriber][:name]) %>
    </div>
</div>
</article>

A:

This isn't "random", but it will take the list of colors that you define in sass, and assign .avatar:nth-child(n) to the nth color in that list.  So as long as you define at least as many colors as there are avatars, each one will get a unique color.  If you have more avatars than colors, this will just loop through the colors repeatedly.
$avatarBgColors: #42a5f5, #26a69a, #ffa727, #ef5350, #c561d6;

@for $i from 1 through length($avatarBgColors) {
  .avatar:nth-child(#{length($avatarBgColors)}n + #{$i}) {
    background-color: nth($avatarBgColors, $i);
  }
}

This compiles into:
.avatar:nth-child(5n + 1) {
  background-color: #42a5f5;
}
.avatar:nth-child(5n + 2) {
  background-color: #26a69a;
}
.avatar:nth-child(5n + 3) {
  background-color: #ffa727;
}
.avatar:nth-child(5n + 4) {
  background-color: #ef5350;
}
.avatar:nth-child(5n + 5) {
  background-color: #c561d6;
}

