Gradient mixin

gradient.scss

// ================
// G R A D I E N T
// M I X I N
// ================
// from http://codepen.io/Hornebom/pen/epqmGx/

// Built upon the logic found in a ps file
// element has a solid background
// background is covered by a gradient of one color
// one can define the opacity of the two color stops + the gradient angle

@mixin gradient (
$bgColor,       // background-color
$angle,         // gradient angle
$gradientColor, // gradient color
$opacityStart,  // opacity at start > 1 - 0
$opacityEnd     // opacity at end > 1 - 0
) {
  background-color: $bgColor;
  background-image: linear-gradient(
    ($angle * 1deg),
    rgba($gradientColor, $opacityStart),
    rgba($gradientColor, $opacityEnd)
  );
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
// example
// @include gradient($purple-base, 180, $mint-base, 0.8, 0.6);