Visualising margins for UX Debugging [4 of 8]

visualising-margins-for-ux-debugging_d.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 {
        position: absolute;
        content: attr(class);
        font-size: 12px;;
        z-index: 4;
        @if $side == top {
          color: green;
          background-color: rgba(199, 238, 0, 0.18);
          #{$side}: -#{$valuePx};
          left: 0;
          text-align: right;
          height: $valuePx;
          width: 100%;
        } @else if $side == bottom {
          color: rgb(140, 91, 0);
          background-color: rgba(238, 143, 0, 0.331);
          #{$side}: -#{$valuePx};
          left: 0;
          text-align: right;
          height: $valuePx;
          width: 100%;
        } @else {
          color: rgb(0, 128, 109);
          background-color: rgba(0, 128, 109, 0.351);
          #{$side}: 0;
          height: 100%;
          width: $valuePx;
        }
      }
    }

  }
}