SASS mixin for fading on hover of parent or child element

hover-fade.scss

/*
 * Adds fade on hover of an element or a specified child element
 */
@mixin hover-fade($child: '') {
  @if $child != '' {
    #{$child} {
      transition: opacity 0.33s linear;
    }
  } @else {
    transition: opacity 0.33s linear;
  }

  &:hover #{$child}, &:focus #{$child} {
    opacity: 0.7;
  }
}

/* Usage for fading parent element on hover */
a {
  @include hover-fade();
}

/* Usage for fading child element on hover */
.tile {
  @include hover-fade('.image');	
}