grid.debug.scss

// Involves some hacky manually-coded pixel values, but a lifesaver for debugging grids
@if $debug {
  .debug--cols {
    @each $group in $col-groups {
        .grid--debug-#{$group}-cols:before {
          content: '';
          position: absolute;
          margin: 0 auto;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;

          $cols: $group;
          $output: ();

          @for $i from 1 to $cols {
            $output: append($output, #{"#{transparentize($blue, .95)} #{percentage($i/$cols)},"});
            $output: append($output, #{"transparent #{percentage($i/$cols)},"});
            $output: append($output, #{"transparent calc( #{percentage($i/$cols)} + 30px ),"});
            $output: append($output, #{"#{transparentize($blue, .95)} calc( #{percentage($i/$cols)} + 30px ),"});
          }

          background-image: linear-gradient(left,
            transparent,
            transparent 30px,
            transparentize($blue, .95) 30px,
            unquote($output)
            transparentize($blue, .95) 100%
          );
        }
    }
  }
}