Creates guides, useful for prototyping.

_guides.scss

$guides-default-color: #4e68c7;
$guides-default-orientation: horizontal;

/**
 * Creates guides, useful for prototyping.
 *
 * @param $guide-sets List of guides, which can be numbers (uses default
 * color and orientation) or lists in the form (color orientation guides),
 * where guides can be a single number or a list of numbers.
 */
@mixin guides($guide-sets) {
  $colors: ();
  $positions: ();
  $sizes: ();
  
  @each $guide-set in $guide-sets {
    @if type_of($guide-set) == number {
      $guide-set: $guides-default-color $guides-default-orientation $guide-set;
    }
    
    $color: linear-gradient(0deg, nth($guide-set, 1), nth($guide-set, 1));
    $position: ();
    $size: ();
    
    @each $guide in nth($guide-set, 3) {
      @if nth($guide-set, 2) == horizontal {
        $position: 0 $guide;
        $size: 100% 1px;
      }
      @else {
        $position: $guide 0;
        $size: 1px 100%;
      }
      
      $colors: append($colors, $color, comma);
      $positions: append($positions, $position, comma);
      $sizes: append($sizes, $size, comma);
    }
  };
  background-repeat: no-repeat;
  background-image: $colors;
  background-position: $positions;
  background-size: $sizes;
}