width&height.scss

//VARIABLES
$breakpoints:  $sm, $md, $lg, $xl;

$breakpoint-xs: 575px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

$breaks: $breakpoint-sm, $breakpoint-md, $breakpoint-lg, $breakpoint-xl;

$wh-options: 10;

// Width and Height 

@for $i from 1 through 10 {
  .h-#{$wh-options * $i}{
    height: ($wh-options * $i)#{"% !important"};
  }
  .w-#{$wh-options * $i}{
    width: ($wh-options * $i)#{"% !important"};
  }
}

$j: 1;
@each $break in $breaks {
  @media screen and (min-width: $break) { 
    @for $i from 1 through 10 {
      .h-#{nth($breakpoints,$j)}-#{$wh-options * $i}{
        height: ($wh-options * $i)#{"% !important"};
      }
      .w-#{nth($breakpoints,$j)}-#{$wh-options * $i}{
        width: ($wh-options * $i)#{"% !important"};
      }
    }
  }   
  $j: $j + 1
}