Sass written blueprint grid martix

blueprint.scss

/*
  **param:** `$size` value of the whole size of the gradient
  **param:** [`$direction`] value of the gradient direction. *default: left (horizontal)*
  **param:** [`$color`] basic color value of the grid. *default: black*
  **param:** [`$parts`] value of how many sub parts should be splitted the gradient. *default: 1*
*/
@function gridGradient($size, $direction: left, $color: black, $parts: 10) {
  $px          : percentage(1px / $size);
  $colColor    : rgba($color, .2);
  $middleColor : rgba($color, .1);
  $gapColor    : complement(rgba($color, .025));
  $tr          : transparent;
  
  $gradient: $tr;
  @for $i from 1 through $parts {
    $p: percentage((($parts + 0px) * $i) / $size);
    $c: $gapColor;
    @if $i == round($parts / 2) {
      $c: $middleColor;
    } @else if $i == $parts {
      $c: $colColor;  
    }
    $gradient: join($gradient, ($tr $p - $px, $c $p - $px, $c $p, $tr $p), comma);
  }
  
  @return linear-gradient($direction, $gradient);
}
.blueprint-overlay {
  $gridWidth: 100px;
  @include background-image(
    gridGradient($gridWidth),
    gridGradient($gridWidth, top)
  );
  @include background-size($gridWidth $gridWidth);
  @include experimental(pointer-events, none);
  height: 100%; 
  left: 0;
  position: absolute;  
  top: 0;
  width: 100%;
}

gistfile1.html

<div class="blueprint-overlay"></div>