A CodePen by Daniel Ott. Long Shadow Sass Mixin - A mixin to create easily create the newest fad in design: long shadows!

index.html

<div class="banner">
  <h1>Long Shadows</h1>
  <h2>Sass Mixin for Long Shadows</h2>
</div>

style.scss

@import "compass";
@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);
}

$color: #E13E06;

.banner {
  padding: 100px;
  text-align: center;
  overflow: hidden;
  border-bottom: 5px solid #ccc;
  background-color: $color;
  
  h1, h2 {
    line-height: 1;
    margin: 0;
    color: #fff;
  }
  
  h1 {
    font-size: 75px;
    @include longshadow(darken($color, 5% ));
  }
  
  h2 {
    font-size: 40px;
    @include longshadow(darken($color, 8% ));
  }
}