Susy debug action

_grid.scss

// optional, i like the light black better
$grid-background-column-color:rgba(black, 0.075);


@mixin debug-susy-grid($points){
  #grid{ position:absolute; top:0px; right:$grid-padding; left:$grid-padding; bottom:0px; display:none;
    @include susy-grid-background; z-index:10000;
    @for $i from 1 to length($points){
      @include at-breakpoint(nth($points, $i)){ 
        @include susy-grid-background; 
      }
    }
  }
  
  #grid:after{ position:fixed; top:0px; left:0px; z-index:10000; background:rgba(white, 0.5); display:block; padding:.25em 1em; font-size:11px; 
    @for $i from 1 to length($points){
      @include at-breakpoint(nth($points, $i)){ 
        content:"#{$total-columns} | #{container-outer-width()} | #{columns-width()}"; 
      }
    }
  }
}

_mixins.scss

@mixin bleed($padding: $grid-padding, $sides: left right) {
  @if $sides == 'all' {
    margin: - $padding;
    padding: $padding;
  } @else {
    @each $side in $sides {
      margin-#{$side}: - $padding;
      padding-#{$side}: $padding;
    }
  }
}

@mixin all-breakpoints($points: $breakpoints){
  $points:compact($points);
  
  @for $i from 1 to length($points){
    @include at-breakpoint(nth($points, $i)){ 
      @content;
    }
  }
}

grid.js

(function(){
  var grid  = $('#grid'),
      bgrid = $('#baseline_grid');
  
  $(document).on('keydown', showgrid);
  
  $(function(){
    if( readCookie('showgrid') != null ){
      grid.show();
      if( readCookie('baselinegrid') != null )
        bgrid.show();
    }
  });
  
  function showgrid(event){
    if( event.target.tagName.toLowerCase() != 'body' ) return true;
    if( event.which != 71 && event.which != 66 ) return true;
    switch(event.which){
      case 71:
        if( grid.is(":hidden") ){
          grid.show();
          createCookie('showgrid', true, 1);
        }else{
          grid.hide();
          eraseCookie("showgrid");
        }
      break;
      case 66:
        if( bgrid.is(":hidden") ){
          bgrid.show();
          createCookie('baselinegrid', true, 1);
        }else{
          bgrid.hide();
          eraseCookie("baselinegrid");
        }
      break;
    }
  }
  
  function createCookie(name, value, days) {
    var date,
        expires = "";

    if (days) {
      date = new Date();
      date.setTime( date.getTime() + (days*24*60*60*1000) );
      expires = "; expires=" + date.toGMTString();
    }

    document.cookie = name + "=" + value + expires + "; path=/";
  }

  function readCookie(name) {
    var c, ca = document.cookie.split(';'),
        i = 0, len = ca.length,
        nameEQ = name + "=";

    for (; i < len; i++) {
      c = ca[i];
      
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) {
        return c.substring(nameEQ.length, c.length);
      }
    }
    return null;
  }

  function eraseCookie(name) {
    createCookie(name, "", -1);
  }
  
  
})();