Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="rainbow-text-wrapper">
    <h1 class="gradient-text">this is some rainbow gradient text</h1>
</div>

<div class="blue-text-wrapper">
    <h2 class="gradient-text">this is some blue gradient text</h2>
</div>


<script>
  // this function is here to automate attr: data-gradient-text
  // data attr required for gradient text shadow
  (function () {
    'use strict';
    
    var gradientText = document.querySelectorAll('.gradient-text');
    
    [].forEach.call(gradientText, function (text) {
        text.dataset.gradientText = text.innerHTML;
    });
  }());

</script>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

/*
* Sass mixin for gradient text
*
* https://gist.github.com/samternent/c2d5a7e49bcd60d68a3e
*/

/*
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
*/
@function colorStopGradient($colors, $positions) {
	$gradient: null;
	@for $i from 1 through length($colors) {
		$color: nth($colors, $i);
		$position: nth($positions, $i);
		$gradient: append($gradient, color-stop($position, $color), comma);
	}
	@return $gradient;
}

/*
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
*/
@function standardGradient($colors, $positions) {
	$gradient: null;
	@for $i from 1 through length($colors) {
		$color: nth($colors, $i);
		$position: nth($positions, $i);
		$gradient: append($gradient, ($color $position), comma);
	}
	@return $gradient;
}

/*
 $type : type of gradient to make - ie: linear
 $fromTo: from and to positions for gradient - ie: left top, left bottom
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
 $textShadow : text shadow string for non-webkit fallback
*/
@mixin generateGradientStyle ($type, $direction, $colors, $positions, $color, $textShadow) {
  position: relative;
  background: transparent;
	background: -webkit-gradient(
			$type,
			$direction,
			colorStopGradient($colors, $positions)
	);
	background: -webkit-#{$type}-gradient(
			$direction,
			standardGradient($colors, $positions)
	);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	-moz-text-shadow: unquote($textShadow);
	-o-text-shadow: unquote($textShadow);
}

/*
 $direction: direction of the gradient - ie: top left
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
 $type (optional) : type of gradient to make - ie: linear
 $gradientShadow (optional) : text shadow string for gradient text
 $normalShadow (opional) : text shadow string for non-webkit fallback
*/
@mixin gradient-text ($colors, $positions, $type: linear, $direction: top, $gradientShadow: null, $fallbackColor: #ff2, $fallbackShadow: null) {
	@if ($gradientShadow == null ) {
		$gradientShadow: 0.06em 0.06em 0.06em rgba(0, 0, 0, 0.4);
	}

	.gradient-text {
		@include generateGradientStyle($type, $direction, $colors, $positions, $fallbackColor, $fallbackShadow);
	}
	.gradient-text:before {
		position: absolute;
		background: none;
		content: attr(data-gradient-text);
		text-shadow: unquote($gradientShadow);
		z-index: -1;
	}
}


// usage
.rainbow-text-wrapper, .blue-text-wrapper {
  position: relative;
  float: left;
  clear: left;
  display: inline-block;
}

.rainbow-text-wrapper {
  $gradientDirection: left top, right bottom;
  $gradientColors: #f22, #f2f, #22f, #2ff, #2f2, #2f2, #ff2, #f22;
  $gradientPositions: 0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9, 1;
  @include gradient-text($gradientColors, $gradientPositions, linear, $gradientDirection);  
}

.blue-text-wrapper {
    $gradientDirection: left top, right top;
    $gradientColors: #aaf, #22c, #aaf, #eef, #aaf, #22c, #aaf;
    $gradientPositions: 0, 0.15, 0.3, 0.45, 0.6, 0.75, 1;
    @include gradient-text($gradientColors, $gradientPositions, linear, $gradientDirection);  
}

SassMeister-output.css

/*
* Sass mixin for gradient text
*
* https://gist.github.com/samternent/c2d5a7e49bcd60d68a3e
*/
/*
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
*/
/*
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
*/
/*
 $type : type of gradient to make - ie: linear
 $fromTo: from and to positions for gradient - ie: left top, left bottom
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
 $textShadow : text shadow string for non-webkit fallback
*/
/*
 $direction: direction of the gradient - ie: top left
 $colors : list of colors to make up the gradient
 $positions : list of percentage positions for the gradient (lists should contain same amount of values)
 $type (optional) : type of gradient to make - ie: linear
 $gradientShadow (optional) : text shadow string for gradient text
 $normalShadow (opional) : text shadow string for non-webkit fallback
*/
.rainbow-text-wrapper, .blue-text-wrapper {
  position: relative;
  float: left;
  clear: left;
  display: inline-block;
}

.rainbow-text-wrapper .gradient-text {
  position: relative;
  background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  background: -webkit-linear-gradient(left top, right bottom, #f22 0, #f2f 0.15, #22f 0.3, #2ff 0.45, #2f2 0.6, #2f2 0.75, #ff2 0.9, #f22 1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rainbow-text-wrapper .gradient-text:before {
  position: absolute;
  background: none;
  content: attr(data-gradient-text);
  text-shadow: 0.06em 0.06em 0.06em rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.blue-text-wrapper .gradient-text {
  position: relative;
  background: transparent;
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #aaf), color-stop(0.15, #22c), color-stop(0.3, #aaf), color-stop(0.45, #eef), color-stop(0.6, #aaf), color-stop(0.75, #22c), color-stop(1, #aaf));
  background: -webkit-linear-gradient(left top, right top, #aaf 0, #22c 0.15, #aaf 0.3, #eef 0.45, #aaf 0.6, #22c 0.75, #aaf 1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blue-text-wrapper .gradient-text:before {
  position: absolute;
  background: none;
  content: attr(data-gradient-text);
  text-shadow: 0.06em 0.06em 0.06em rgba(0, 0, 0, 0.4);
  z-index: -1;
}

SassMeister-rendered.html

<div class="rainbow-text-wrapper">
    <h1 class="gradient-text">this is some rainbow gradient text</h1>
</div>

<div class="blue-text-wrapper">
    <h2 class="gradient-text">this is some blue gradient text</h2>
</div>


<script>
  // this function is here to automate attr: data-gradient-text
  // data attr required for gradient text shadow
  (function () {
    'use strict';
    
    var gradientText = document.querySelectorAll('.gradient-text');
    
    [].forEach.call(gradientText, function (text) {
        text.dataset.gradientText = text.innerHTML;
    });
  }());

</script>