Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

/*
Example use:

JS to split text into individual parts:
// Split text for animations.
var $text = $(".split");
$text.html("<span>" + $text.html().split("").join("</span><span>").split("<span> </span>").join("<span>&nbsp;</span>") + "</span>");

Which would output this, for example:
<h3 class="year split"><span>2</span><span>0</span><span>1</span><span>4</span></h3>
*/


@mixin selector($selector, $property, $values) {
  @for $i from 1 through length($values) {
    &:#{$selector}(#{$i}) {
      #{$property}: nth($values, $i);
    }
  }
}

.year span {
 @include selector(nth-of-type, animation-delay, $values:(0.3s, 0.4s, 0.5s, 0.6s));  
}

SassMeister-output.css

/*
Example use:

JS to split text into individual parts:
// Split text for animations.
var $text = $(".split");
$text.html("<span>" + $text.html().split("").join("</span><span>").split("<span> </span>").join("<span>&nbsp;</span>") + "</span>");

Which would output this, for example:
<h3 class="year split"><span>2</span><span>0</span><span>1</span><span>4</span></h3>
*/
.year span:nth-of-type(1) { animation-delay: 0.3s; }
.year span:nth-of-type(2) { animation-delay: 0.4s; }
.year span:nth-of-type(3) { animation-delay: 0.5s; }
.year span:nth-of-type(4) { animation-delay: 0.6s; }