JohnPaulDesign
7/21/2017 - 2:16 PM

Gradient Mixin

Gradient Mixin

@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;
}

//This element goes into the class/element

@include gradient($bg-dark, 135, $bg-light, 1, 0);