Fade mixin for SCSS

The @mixin fade() creates a CSS effect that will gradually make a element disappear. The first parameter is the type of fade to apply, "hide" or "show". The second parameter is the transition time in seconds.

Shortcut: scss.mixin.fade

@mixin fade($type) {
  @if $type== "hide" {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
  } @else if $type== "show" {
    visibility: visible;
    opacity: 1;
    transition: visibility 1s, opacity 1s;
  }
}