A Pen by Evan Lovely.

index.html

<h2>Visualize Your Grids Easier!</h2>

<div class="grid">
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
  <div class="grid-item">
    <p>A Grid Item</p>
  </div>
</div>

Scss-Grid-Visualizer-Mixin.markdown

Scss Grid Visualizer Mixin

Easily see your grid items, which order they are in, and what classes are applied to them.

A Pen by Evan Lovely on CodePen.

License.

style.scss

@mixin grid-debugger($grid-item: ".grid-item") {
    //debugger
  counter-reset: grid-item;
  #{$grid-item} {
    outline: dotted 1px red;
    position: relative;
    &:hover {
      &:before,
      &:after {
        background: hsla(0,0%,0%,0.0);
        font-size: 1px;
      }
    }
    &:before {
      content: counter(grid-item);
      counter-increment: grid-item;
      color: white;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: hsla(0, 0%, 0%, 0.5);
      padding-top: 15px;
    }
    &:after {
      content: "class: " attr(class);
      position: absolute;
      top: 70px;
      font-size: 18px;
      color: white;
      text-align: center;
      z-index: 2;
      display: block;
      width: 100%;
    }
  }
}

.grid {
  @include grid-debugger();
}

/* Temp Styles Below */

.grid-item {
  width: 31%;
  height: 150px;
  float: left;
  margin:0 1% 10px;
}