Practice Mixin With Content

// Mixin With Content

.black-overlay {
  @include overlay(black, 0.5);
}

@include keyF(fade-in) {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@include keyF(go-up) {
  from {
    bottom: 0;
  }
  to {
    bottom: 100px;
  }
}

@mixin overlay($color, $opacity) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color, $opacity);
}

@mixin keyF($anim-name) {
  @-webkit-keyframes #{$anim-name} {
    @content;
  }
  @keyframes #{$anim-name} {
    @content;
  }
}