jameswquinn · February 2, 2017 21:45
diff --git a/index.html b/index.html
 <div class="my-container">
  <div class="my-element"></div>
  <div class="my-element"></div>
  <div class="my-element"></div>
 </div>
diff --git a/style.scss b/style.scss
 @import "compass/css3";

 .my-element {
  @include transition(opacity 0.3s);
  @include opacity(0);
  @include inline-block;
  margin: 5px;
  width: 100px;
  height: 100px;
  background: tomato;

  // Loop through the items and add some delay.
  @for $i from 1 through 3 {
      &:nth-child(#{$i}) { 
       @include transition-delay(0.1s * $i); 
      }
    }

  .my-container:hover & {
    @include opacity(1);
  }
 }
diff --git a/tnghy.markdown b/tnghy.markdown
	@import "compass/css3";

	.my-element {
	@include transition(opacity 0.3s);
	@include opacity(0);
	@include inline-block;
	margin: 5px;
	width: 100px;
	height: 100px;
	background: tomato;

	// Loop through the items and add some delay.
	@for $i from 1 through 3 {
	&:nth-child(#{$i}) {
	@include transition-delay(0.1s * $i);
	}
	}

	.my-container:hover & {
	@include opacity(1);
	}
	}