<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));
}