## Generating a Random Background Color in Sass

I’m exploring a lot more of how to use the lesser known parts of Sass. One of the nicer things that Sass offers is lists and I’m going to cover how to leverage some of their benefits.

Here are some random colors:

```
$blue: #3ea5ce;
$green: #99c712;
$yellow: lighten(#ffba00, 5%);
$red: #E53B3A;
```

Just so we’re clear you can perform a function on a variable (took me forever to get that). Now let’s make a list of these color variables.

```
$colors: $blue, $green, $yellow, $red;
```

This might seem really redundant. But it’s important.

Here’s the key part our `$key`

variable is performing a function to get the length of items in our list. This will output a number and that then number becomes the range for the `random()`

function to find a random whole number out of. Now since it’s the length of the number of list items we have, when we call the `nth()`

function on our list it can only return a number that will map to an item on our list.

Let’s assign the $nth value to a new variable called `$main-color`

for semantics. I used the `!default`

flag on the `$main-color`

so that we can reassign it later if we want.

```
$key: random( length($colors) );
$nth: nth( $colors, $key );
$main-color: $nth !default;
```

Okay now we can randomly out put a hex color value. Just for kicks let’s right a mixin to take a color value and make it darken every time that element is used. There’s a lot going on this mixin. It takes two parameters `$c`

a color & `$y`

a number. It when we call it on our `.row`

selector. What this will do is set a background of our color and than using that `@for`

loop and little bit of math to count out an `&:nth-child($i)`

until it hits our `$y`

value for our parent selector and progressive darken the color for each row with the `darken()`

function.

```
@mixin backgrounds($c, $y) {
background: $c;
@for $i from 1 through $y {
$k: 3%;
$j: $i - 1;
@if $i == 1 {
&:nth-child(#{$i}) { background: $c; }
}
@else {
&:nth-child(#{$i}) { background: darken($c, ($k * $j)); }
}
}
}
.row { @include backgrounds($main-color, 10); }
```

Here’s an example where I’m using it on a form.

See the Pen Form Row Pattern by Charles Peters (@charlespeters) on CodePen.

Here’s an example without the random and using the `lighten()`

function.

See the Pen Exploring Flexbox and Various Sass Functions by Charles Peters (@charlespeters) on CodePen.

My big point is variables are dynamic and it’s awesome. Take advantage of that and really apply logic to your stylesheets. Now go forth and stare at a glowing screen for disproportionate amount of time and worthy your loved ones!