Randomize Sass

There is a very clever technique in SASS that allows you to randomly assign values in your code. The effect essentially lets your code do some of the design work for you, creating random patterns that would be a pain in the ass to do yourself.

Let’s say you are creating a background of differently colored tiled squares. Typically, I would have approached this by creating a container div to hold my tiles, a second div for the tiles themselves, then probably used the nth-child pseudo element to assign color values to each tile.

That might’ve looked something like the following.

.container { 
  height: 800px;
  width: 800px;
}

.tile {
  float: left;
  height: 0;
  padding-bottom: 5%;
  width: 5%;
}

.tile:nth-child(1) { background-color: #2e3e5c; }

...

.tile:nth-child(10) { background-color: #ff9e2c }

/* And so on... */

Yeah, it’s doable. But it’s also a lot of repeating lines, which is neither efficient nor maintainable.

JavaScript is able to do the heavy lifting for us, but wouldn’t it be nicer if CSS could do this instead? Well, it’s our lucky day, because SASS does just that with the random() function. That same code above is reduced to the following.

.tile {
  float: left;
  height: 0;
  padding-bottom: 5%;
  width: 5%;
}

$s-min: 20;
$s-max: 70;
$l-min: 30;
$l-max: 90;

@for $i from 1 through 1000 {
  .square:nth-child(#{$i}) {
    background-color: hsl(random(360),$s-min+random($s-max+-$s-min),$l-min+random($l-max+-$l-min));
  }
}

body {
  margin: 0;
  overflow: hidden;
}

What’s the difference? Instead of having to writing a new line for every nth-child of the .tile element, we have created a function that takes care of it for us and loops it 1,000 times. Not only that, but we’ve created random colors by applying random() to the Hue, Saturation and Lightness (HSL) values in the background-color.

Notice the number above the function? They’re simply variables we’ve created to specify minimum and maximum values for HSL.

To get the full benefit of random(), I’ve seen others using HAML as an HTML preprocessor to output a loop for repeating element rather than typing them out by hand. HAML is new to me and it’s probably one of those things I should know, but here’s how it could be used for this tile example.

- (1..1000).each do
    .tile

This is basically telling our code to output 1,000 copies of the .tile element. Much easier than tying that out 1,000 times ourselves!

OK, so what is this good for? I honestly don’t know yet. I like the novelty of having a different design each time my code is rendered, but it’s not exactly a functional benefit. If nothing else, it saves time and what’s better than that?

There are a ton of more complicated and interesting examples floating around CodePen, but this illustrates the concept. I’m interested in diving deeper into this to see how it can be used in production.

[codepen_embed height=”318″ theme_id=”279″ slug_hash=”LwHhF” default_tab=”result”]See the Pen Random() Practice by Geoff Graham (@geoffgraham) on CodePen.[/codepen_embed]