Visualising margins for UX Debugging [6 of 8]

visualising-margins-for-ux-debugging_f.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;
    }

    [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%;
        }
      }
    }

  }
}