$steps: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100;

// HEIGHT
@mixin height-x {
  @each $step in $steps {
    .height-pct-#{$step} {
      height: #{$step} + '%';
    }
    .height-vh-#{$step} {
      height: #{$step} + 'vh';
    }
  }
}

@include height-x;

.full-height {
  height: 100%;
}

.half-height {
  height: 50%;
}

.height-fit-content {
  height: fit-content;
}

// WIDTH

@mixin width-x {
  @each $step in $steps {
    .width-pct-#{$step} {
      width: #{$step} + '%';
    }
    .width-vw-#{$step} {
      width: #{$step} + 'vw';
    }
  }
}

@include width-x;

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.width-fit-content {
  width: fit-content;
}