SASS baseline grid overlay mixin

baseline-grid-overlay.scss

// Baseline grid
// Overlays a baseline grid on your pages.

$show-baseline-grid: false !default ;
$baseline-grid-color: rgb(204, 204, 204) !default;
$baseline-grid-opacity: 0.8 !default;
$baseline-top-offset: 0 !default;
// When no grid row height is given, we assume each row is 16px * 1.5 tall.
$baseline-grid-height: 16 * 1.5 !default; // 1rem * line-height: normal

@mixin baseline-grid($grid-height: 24) {

  body {
    // Force ::after psuedo element fill to the height of the body.
    position: relative;
    
    &:after {
      display: block;
      position: absolute;
      width: auto;
      height: auto;
      z-index: 9999;
      content: "";
      pointer-events: none;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: $baseline-opacity;

      // Configure top offset
      top: $baseline-top-offset;
    
      // Draw grid
      background: linear-gradient(#{$baseline-color} 1px, transparent 1px) left top / 1px #{$grid-height+px};
    }
    
    // Hides grid psuedo element when clicked. This can happen on browswers that don't support the pointer-events rule.
    &:active:after {
      display: none;
    }
  }	
}
// -----------------------------------------------------------------------------
//
//             ++ LOOK BELOW ++              
//              X<---------->X             
//             XXXXXXXXXXXXXXXX            
//             XXXXXXXXXXXXXXXX            
//            XXXXXXXXXXXXXXXXXX           
//  __        XXXXXXXXXXXXXXXXXX       ___
// |XXX\___  XXXXXXXXXXXXXXXXXXXX  ___/XXX|
// |XXXXXXX\ XXXXXXXXXXXXXXXXXXXX /XXXXXXX|
// |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
// |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
// |XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX| 
// |---+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX+--|
// |---+---+XXXXXXXXXXXXXXXXXXXXXXX+---+--|
//  \--+---+---+XXXXXXXXXXXXXXX+---+---+--/
//    \+---+---+--+XXXXXXXXX+--+---+---+/   
//        \+---+--+--+XXX+--+--+---+/       
//            \+--+--+---+--+--+/           
//               \+--+---+--+/              
//                  \+---+/                   
//     
// -----------------------------------------------------------------------------

// Uncomment the next section to turn the grid on.

// @if $show-baseline-grid {
//     @warn "Baseline grids are on! Please disable before deploying.";
//     @include baseline-grid($baseline-grid-height);
// }