@for $i from 1 through 100 { $heightValue: 1% * $i; .h-#{$i} { height: $heightValue; } @media (min-width: 576px) { .h-sm-#{$i} { height: $heightValue !important; } } @media (min-width: 768px) { .h-md-#{$i} { height: $heightValue !important; } } @media (min-width: 992px) { .h-lg-#{$i} { height: $heightValue !important; } } @media (min-width: 1200px) { .h-xl-#{$i} { height: $heightValue !important; } } } @for $i from 1 through 100 { $widthValue: 1% * $i; .w-#{$i} { width: $widthValue !important; } } .min-h-60 { min-height: 60px; } .max-h-80 { max-height: 80%; } .heigth-80 { height: 80px; }