admin.dukany.io/public/assets/scss/_width_height.scss

// Width & Height


/*******************
Width property 
*******************/

$width-property-map: ( w-: width, min-w-: min-width, max-w-: max-width);
$sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
@each $size in $sizes-list {
    $val: $size + 0px !important;
    @each $keyword,
    $property in $width-property-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$width-property-per-map: ( w-p: width, min-w-p: min-width, max-w-p: max-width);
$sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95;
@each $size in $sizes-list {
    $val: $size + 0%;
    @each $keyword,
    $property in $width-property-per-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}
$width-property-per-map: ( w-p: width, min-w-p: min-width, max-w-p: max-width);
$sizes-list: 100;
@each $size in $sizes-list {
    $val: $size + 0% !important;
    @each $keyword,
    $property in $width-property-per-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$width-auto-property-map: ( w-: width, min-w-: min-width, max-w-: max-width);
$sizes-list: auto;
@each $size in $sizes-list {
    $val: $size;
    @each $keyword,
    $property in $width-auto-property-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

@include screen-xs {
    $width-property-map: ( w-xs-: width, min-w-xs-: min-width, max-w-xs-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-xs-p: width, min-w-xs-p: min-width, max-w-xs-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-xs-: width, min-w-xs-: min-width, max-w-xs-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-sm {
    $width-property-map: ( w-sm-: width, min-w-sm-: min-width, max-w-sm-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-sm-p: width, min-w-sm-p: min-width, max-w-sm-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-sm-: width, min-w-sm-: min-width, max-w-sm-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-md {
    $width-property-map: ( w-md-: width, min-w-md-: min-width, max-w-md-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-md-p: width, min-w-md-p: min-width, max-w-md-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-md-: width, min-w-md-: min-width, max-w-md-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-lg {
    $width-property-map: ( w-lg-: width, min-w-lg-: min-width, max-w-lg-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-lg-p: width, min-w-lg-p: min-width, max-w-lg-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-lg-: width, min-w-lg-: min-width, max-w-lg-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-xl {
    $width-property-map: ( w-xl-: width, min-w-xl-: min-width, max-w-xl-: max-width);
    $sizes-list: 0 10 20 30 40 50 60 70 80 90 100 120 150 160 170 180 190 200 250 300 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px;
        @each $keyword,
        $property in $width-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-property-per-map: ( w-xl-p: width, min-w-xl-p: min-width, max-w-xl-p: max-width);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0%;
        @each $keyword,
        $property in $width-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $width-auto-property-map: ( w-xl-: width, min-w-xl-: min-width, max-w-xl-: max-width);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size;
        @each $keyword,
        $property in $width-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}


/*******************
Height property 
*******************/

$height-property-map: ( h-: height, min-h-: min-height, max-h-: max-height);
$sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 165 170 175 180 185 190 195 200 210 220 230 240 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
@each $size in $sizes-list {
    $val: $size + 0px !important;
    @each $keyword,
    $property in $height-property-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$height-property-per-map: ( h-p: height, min-h-p: min-height, max-h-p: max-height);
$sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
@each $size in $sizes-list {
    $val: $size + 0% !important;
    @each $keyword,
    $property in $height-property-per-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

$height-auto-property-map: ( h-: height, min-h-: min-height, max-h-: max-height);
$sizes-list: auto;
@each $size in $sizes-list {
    $val: $size !important;
    @each $keyword,
    $property in $height-auto-property-map {
        .#{$keyword}#{$size} {
            #{$property}: $val;
        }
    }
}

@include screen-xs {
    $height-property-map: ( h-xs-: height, min-h-xs-: min-height, max-h-xs-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 165 170 175 180 185 190 195 200 210 220 230 240 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-xs-p: height, min-h-xs-p: min-height, max-h-xs-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-xs-: height, min-h-xs-: min-height, max-h-xs-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-sm {
    $height-property-map: ( h-sm-: height, min-h-sm-: min-height, max-h-sm-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 165 170 175 180 185 190 195 200 210 220 230 240 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-sm-p: height, min-h-sm-p: min-height, max-h-sm-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-sm-: height, min-h-sm-: min-height, max-h-sm-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-md {
    
    $height-property-map: ( h-md-: height, min-h-md-: min-height, max-h-md-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 165 170 175 180 185 190 195 200 210 220 230 240 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-md-p: height, min-h-md-p: min-height, max-h-md-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-md-: height, min-h-md-: min-height, max-h-md-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-lg {
    $height-property-map: ( h-lg-: height, min-h-lg-: min-height, max-h-lg-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 165 170 175 180 185 190 195 200 210 220 230 240 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-lg-p: height, min-h-lg-p: min-height, max-h-lg-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-lg-: height, min-h-lg-: min-height, max-h-lg-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}

@include screen-xl {
    $height-property-map: ( h-xl-: height, min-h-xl-: min-height, max-h-xl-: max-height);
    $sizes-list: 0 10 15 20 30 40 50 60 70 80 90 100 120 150 160 165 170 175 180 185 190 195 200 210 220 230 240 250 300 310 320 325 350 400 450 500 550 600 650 700 750 800 850 900 950 1000;
    @each $size in $sizes-list {
        $val: $size + 0px !important;
        @each $keyword,
        $property in $height-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-property-per-map: ( h-xl-p: height, min-h-xl-p: min-height, max-h-xl-p: max-height);
    $sizes-list: 5 10 15 20 25 30 35 40 45 50 60 65 70 75 80 85 90 95 100;
    @each $size in $sizes-list {
        $val: $size + 0% !important;
        @each $keyword,
        $property in $height-property-per-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }

    $height-auto-property-map: ( h-lg-: height, min-h-lg-: min-height, max-h-lg-: max-height);
    $sizes-list: auto;
    @each $size in $sizes-list {
        $val: $size !important;
        @each $keyword,
        $property in $height-auto-property-map {
            .#{$keyword}#{$size} {
                #{$property}: $val;
            }
        }
    }
}