グラデーションをスマートに記述するmixin

グラデーションをCSSで実装する時って、各ブラウザに対応しようと思うとコードが長くなっちゃいますよね😖
いつも使うこのmixinは一行書くだけで横から縦からのグラデーションが簡単にかけちゃいます！
ボタンや背景に便利なのでこちらでもメモとして残しておきます😊

グラデーション用のmixin

// グラデーション
@mixin gradient($start-color, $end-color, $orientation){
  background: $start-color;
  @if $orientation == vertical{
    background: -moz-linear-gradient(top,  $start-color 0%, $end-color 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
    background: -webkit-linear-gradient(top,  $start-color 0%,$end-color 100%);
    background: -o-linear-gradient(top,  $start-color 0%,$end-color 100%);
    background: linear-gradient(to bottom,  $start-color 0%,$end-color 100%);
  }
  @else if $orientation == horizontal{
    background: -moz-linear-gradient(left,  $start-color 0%, $end-color 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
    background: -webkit-linear-gradient(left,  $start-color 0%,$end-color 100%);
    background: -o-linear-gradient(left,  $start-color 0%,$end-color 100%);
    background: linear-gradient(to right,  $start-color 0%,$end-color 100%);
  }
  @else{
    background: -moz-radial-gradient(center, ellipse cover,  $start-color 0%, $end-color 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
    background: -webkit-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
    background: -o-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
    background: radial-gradient(ellipse at center,  $start-color 0%,$end-color 100%);
  }
}

左から右へのグラデーション

SCSS

@include gradient(#ffef96, #ffae63, horizontal);

展開CSS

background: -moz-linear-gradient(left, #ffef96 0%, #ffae63 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffef96), color-stop(100%, #ffae63));
background: -webkit-linear-gradient(left, #ffef96 0%, #ffae63 100%);
background: -o-linear-gradient(left, #ffef96 0%, #ffae63 100%);
background: linear-gradient(to right, #ffef96 0%, #ffae63 100%);

上から下へのグラデーション

SCSS

@include gradient(#ffef96, #ffae63, vertical);

展開CSS

background: -moz-linear-gradient(top, #ffef96 0%, #ffae63 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffef96), color-stop(100%, #ffae63));
background: -webkit-linear-gradient(top, #ffef96 0%, #ffae63 100%);
background: -o-linear-gradient(top, #ffef96 0%, #ffae63 100%);
background: linear-gradient(to bottom, #ffef96 0%, #ffae63 100%);