A Sass Mixin for Long Shadows

If you're tired of Flat Design and looking for something to spice it up, why not try Long Shadows? And if you're going to try Long Shadows, why not use a pure CSS solution with this Sass mixin?

See the Pen by danieltott (@danieltott) on CodePen.

It's a pretty simple little thing, but let's break it down a little bit. Here's this mixin itself:

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 200 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

@mixin longshadow($color) {
  text-shadow: makelongshadow($color);
}

Basically the makelongshadow function loops through and gives you a shadow value that consists of a bunch of stacked shadows: 1px 1px $color, 2px 2px $color... etc. Then the longshadow mixin simply calls that function and applies the value to a text shadow. You'd use it like this:

h1 {
  @include longshadow(#ccc);
}

The resulting css would look something like this:

h1 {
  text-shadow:
    0 0 #cccccc,
    1px 1px #cccccc,
    2px 2px #cccccc,
    3px 3px #cccccc,
    4px 4px #cccccc,
    ... 196px 196px #cccccc,
    197px 197px #cccccc,
    198px 198px #cccccc,
    199px 199px #cccccc,
    200px 200px #cccccc;
}

Check out the pen to see it in action, and happy Fourth of July!