Visualising margins for UX Debugging [7 of 8]

visualising-margins-for-ux-debugging_g.scss

$sides: (top, bottom, left, right);
$space-values: (2, 5, 10, 15, 20, 30, 40, 50, 60);

@each $side in $sides {
  @for $i from 1 through length($space-values) {

    $value: nth($space-values, $i);
    $valuePx: #{$value}px;

    .m-#{str-slice($side, 0, 1)}-#{$value} {
      margin-#{$side}: $valuePx;
    }

    // To see helper margins, append the current url with '?helpers=1'
    .show-helpers {
      [class*='m-#{str-slice($side, 0, 1)}-#{$value}'] {
        position: relative;
        &::before,
        &::after {
          position: absolute;
          font-size: 12px;
          z-index: 4;
        }
        &::before {
          @if $side == top {
            content: attr(class);
            color: green;
            background-color: rgba(199, 238, 0, 0.18);
            #{$side}: -#{$valuePx};
            left: 0;
            height: $valuePx;
            width: 100%;
          }
        }
        &::after {
          @if $side == bottom {
            content: attr(class);
            color: rgb(140, 91, 0);
            background-color: rgba(238, 143, 0, 0.331);
            #{$side}: -#{$valuePx};
            left: 0;
            text-align: right;
            height: $valuePx;
            width: 100%;
          }
        }
      }
    }

  }
}