<h1 class="text-longshadow">
    Text with<br> 
    a long shadow.<br> 
    How hip!
</h1>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato:700,900);


/**
 * A Long-shadow mixin, guaranteed to make your Dribbble shots 11% cooler
 * @param  string  $color_a  The darkest colour (closest the object)
 * @param  string  $color_b  The lightest colour (often the background colour)
 * @param  int     $stepnum  Number of steps
 * @param  int     $opacity  The opacity of the blend
 * @return list              Returns a list ready to drop into 'box-shadow' or text-shadow
 */
@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){

  $gradient_steps: null;

  @for $i from 1 through $stepnum {

    $weight: ( ( $i - 1 ) / $stepnum ) * 100;

    $colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);

    $seperator: null;

    @if($i != $stepnum){ 
      $seperator: #{','}; 
    }

    $gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );

    }

    @return $gradient_steps;

}

$bg: #e74c3c;

body{
  background: $bg;
}

.text-longshadow {
  color: #fff;
  font-size: 8rem; 
  line-height: 8rem;
  font-family: "lato", sans-serif;
  font-weight: 900;
  text-align: center;
  @include text-shadow(longshadow(darken($bg,30%),$bg,50, 0.5));
}