_variables.scss

$positions: (
    static: 'static',
    relative: 'relative',
    absolute: 'absolute',
    fixed: 'fixed',
    stick: 'sticky'
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

@each $name, $position in $positions {
  @each $modifier, $breakpoint in $grid-breakpoints {
    @media screen and (min-width: #{$breakpoint}) {
        .position-#{$modifier}-#{$name} {
            position: #{$name} !important;
        }
        @for $i from 1 through 9 {
            .fw-#{$modifier}-#{$i * 100} {
                font-weight: ($i * 100);
            }
        }
        @for $i from 1vh through 100vh {
            .vh-#{$modifier}-#{$i} {
                height: #{$i}vh;
            }
        }
        @for $i from 1vh through 100vh {
            .min-vh-#{$modifier}-#{$i} {
                min-height: #{$i}vh;
            }
        }
        @for $i from 1vw through 100vw {
            .vw-#{$modifier}-#{$i} {
                width: #{$i}vw;
            }
        }
        @for $i from 1vw through 100vw {
            .min-vw-#{$modifier}-#{$i} {
                min-width: #{$i}vw;
            }
        }
    }
  }
}

@for $i from 1 through 100 {
    .vh-#{$i} {
        height: #{$i}vh;
    }
}
@for $i from 1 through 100 {
    .min-vh-#{$i} {
        min-height: #{$i}vh;
    }
}
@for $i from 1 through 100 {
    .vw-#{$i} {
        width: #{$i}vw;
    }
}
@for $i from 1 through 100 {
    .min-vw-#{$i} {
        min-width: #{$i}vw;
    }
}