Generated by SassMeister.com.

SassMeister-input.scss

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

/*
This is a mixin that allows you to dynamically create selectors on anything. 
This is useful for split text animations, like below.

JS to split text into individual parts:
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

/*
This is a mixin that allows you to dynamically create selectors on anything. 
This is useful for split text animations, like below.

JS to split text into individual parts:
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;
}