A Pen by Gal Schlezinger.

index.html

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

Long-Shadow-Sass-Mixin.markdown

Long Shadow Sass Mixin

A mixin to create easily create the newest fad in design: long shadows!

A Pen by Gal Schlezinger on CodePen.

License.

style.sass

@import "compass"
@function makelongshadow($color, $end)
  $val: 0px 0px $color
  @for $i from 1 through $end
    $val: #{$val}, #{$i}px #{$i}px #{$color}

  @return $val

@mixin longshadow($color, $end: 200)
  text-shadow: makelongshadow($color, $end)

$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%))