Generated by SassMeister.com.

SassMeister-input.scss

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

////
// Here is a collection of tools to help manage gradients.
// The idea is simple, you instance a gradient with the
// `gh-gradient` function in order to get a map of properties.
// This map contains a lot of things helping you tweaking your
// gradients the way you want.
////

/// Instanciate a gradient
/// @access public
/// @param {Direction} $direction - Gradient direction
/// @param {Arglist} $color-stops - List of color-stops
/// @return {Gradient} Gradient instance
@function gh-gradient($direction, $color-stops...) {
  $colors: gh-get-colors($color-stops);
  
  @return (
    'fallback': nth($colors, 1),
    'direction': $direction,
    'legacy-direction': gh-legacy-direction($direction),
    'color-stops': gh-ensure-color-stops($color-stops),
    'colors': $colors,
    'length': length($colors)
  );
}


/// Property getter for a gradient
/// @param {Gradient} $gradient - Gradient instance
/// @param {String} $key - Key to fetch
/// @return {*}
/// @throw Throws an error if key doesn't exist.
@function gh-get($gradient, $key) {
  @if map-has-key($gradient, $key) == false {
    @error "Gradients do not have a key named `#{$key}`.";
  }
  
  @return map-get($gradient, $key);
}


/// Return the position of the next full color stop
/// which is a color-stop made of a color AND a stop.
/// @param {List} $color-stops - List of color stops
/// @param {Number} $start-index (1) - Start index
/// @return {Number | Null} - Index or null
@function gh-get-next-full-color-stop-index($color-stops, $start-index: 1) {
  $length: length($color-stops);
  
  @for $i from $start-index through $length {
    @if length(nth($color-stops, $i)) == 2 {
      @return $i;
    }
  }
  
  @return null;
}

/// Make sure all color stops from the given list
/// of color stops are composed of a color AND a stop.
/// @param {List} $color-stops - Color stops
/// @return {List} Updated color stops
@function gh-ensure-color-stops($color-stops) {
  $length: length($color-stops);
  
  @for $i from 1 through $length {
    $stop: nth($color-stops, $i);
    
    @if length($stop) == 1 {
      $computed-stop: null;
      
      @if $i == 1 {
        $computed-stop: 0%;
      } @else if $i == $length {
        $computed-stop: 100%;
      } @else {
        $previous-stop: nth(nth($color-stops, $i - 1), 2);
        
        $next-color-stop-index: gh-get-next-full-color-stop-index($color-stops, $i);
        $next-stop: nth(nth($color-stops, $next-color-stop-index), 2);
        
        $computed-stop: $previous-stop + (($next-stop - $previous-stop) / ($next-color-stop-index - $i + 1));
      }
      
      $color-stops: set-nth($color-stops, $i, $stop $computed-stop);
    }
  }
  
  @return $color-stops;
}


/// Extract a list of colors from a list of color-stops
/// @param {List} $color-stops - Color stops
/// @return {List} List of colors
@function gh-get-colors($color-stops) {
  $colors: ();

  @each $stop in $color-stops {
    @if type-of(nth($stop, 1)) == "color" {
      $colors: append($colors, nth($stop, 1), comma);
    }
  }
  
  @return $colors;
}


/// Test whether a value is a direction for a gradient
/// @param {*} $value - Value to test
/// @return {Bool}
@function gh-is-direction($value) {
  $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
 
  @return $is-keyword or $is-angle;
}


/// Convert a direction to legacy syntax
/// @param {Direction} $value - Value to convert
/// @return {Direction} Legacy direction
/// @throw Throws an error if input value is not a direction
@function gh-legacy-direction($value) {
  @if gh-is-direction($value) == false {
    @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
  }
 
  $conversion-map: (
    to top          : bottom,
    to top right    : bottom left,
    to right top    : left bottom,
    to right        : left,
    to bottom right : top left,
    to right bottom : left top,
    to bottom       : top,
    to bottom left  : top right,
    to left bottom  : right top,
    to left         : right,
    to left top     : right bottom,
    to top left     : bottom right
  );
 
  @if map-has-key($conversion-map, $value) {
    @return map-get($conversion-map, $value);
  }
 
  @return 90deg - $value;
}


/// Display a gradient instance, with its fallback
/// @param {Gradient} $gradient - Gradient instance
/// @param {Color} $fallback (gh-get($gradient, 'fallback')) - Color of first color stop
/// @output `background`
@mixin gh-display($gradient, $fallback: gh-get($gradient, 'fallback')) {
  background: $fallback;
  background: linear-gradient(gh-get($gradient, 'direction'), gh-get($gradient, 'color-stops'));
}


/// Debug a gradient instance at root level in a `@debug-gradient` rule
/// @param {Gradient} $gradient - Gradient instance
@mixin gh-debug($gradient) {
  @at-root {
    @debug-gradient {
      raw_debug: inspect($gradient);
      @each $key, $value in $gradient {
      #{$key}: inspect($value);
      }    
    }
  }
}

test {
  $gradient: gh-gradient(to bottom right, red 20%, yellow, green, blue 55%, red 55%, green);
  @include gh-debug($gradient);
  @include gh-display($gradient);
}

SassMeister-output.css

test {
  background: red;
  background: linear-gradient(to bottom right, red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%);
}
@debug-gradient {
  raw_debug: ("fallback": red, "direction": to bottom right, "legacy-direction": top left, "color-stops": (red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%), "colors": (red, yellow, green, blue, red, green), "length": 6);
  fallback: red;
  direction: to bottom right;
  legacy-direction: top left;
  color-stops: red 20%, yellow 31.6666666667%, green 43.3333333333%, blue 55%, red 55%, green 100%;
  colors: red, yellow, green, blue, red, green;
  length: 6;
}