ARWHD

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!