[Dynamic Widths, Padding & Margins Sass Mixin] Allows for multiple units of measure including rem, %, px, ch, vh & vw. #scss

margins-padding-width-mixin.scss

// =============================================================================================
// ██████  ██    ██ ███    ██  █████  ███    ███ ██  ██████
// ██   ██  ██  ██  ████   ██ ██   ██ ████  ████ ██ ██
// ██   ██   ████   ██ ██  ██ ███████ ██ ████ ██ ██ ██
// ██   ██    ██    ██  ██ ██ ██   ██ ██  ██  ██ ██ ██
// ██████     ██    ██   ████ ██   ██ ██      ██ ██  ██████
// ██████   █████  ██████  ██████  ██ ███    ██  ██████
// ██   ██ ██   ██ ██   ██ ██   ██ ██ ████   ██ ██
// ██████  ███████ ██   ██ ██   ██ ██ ██ ██  ██ ██   ███
// ██      ██   ██ ██   ██ ██   ██ ██ ██  ██ ██ ██    ██
// ██      ██   ██ ██████  ██████  ██ ██   ████  ██████  ▄█
// ███    ███  █████  ██████   ██████  ██ ███    ██ ███████
// ████  ████ ██   ██ ██   ██ ██       ██ ████   ██ ██
// ██ ████ ██ ███████ ██████  ██   ███ ██ ██ ██  ██ ███████
// ██  ██  ██ ██   ██ ██   ██ ██    ██ ██ ██  ██ ██      ██
// ██      ██ ██   ██ ██   ██  ██████  ██ ██   ████ ███████ ▄█
// ██     ██ ██ ██████  ████████ ██   ██ ███████
// ██     ██ ██ ██   ██    ██    ██   ██ ██
// ██  █  ██ ██ ██   ██    ██    ███████ ███████
// ██ ███ ██ ██ ██   ██    ██    ██   ██      ██
//  ███ ███  ██ ██████     ██    ██   ██ ███████
/// @usage
/// <div class="m-r-3vw m-t-10px m-b-5% p-3vw width-50%"></div>
/// @source
/// https://medium.com/@sajinsatheesan995/scss-dynamic-helper-class-functions-like-padding-margin-and-width-31b48337573
// =============================================================================================
$position: (
    top: 't',
    right: 'r',
    left: 'l',
    bottom: 'b',
);
$unit: (
    rem: 'rem',
    per: '%',
    px: 'px',
    vh: 'vh',
    vw: 'vw',
    ch: 'ch',
);

@for $size from 0 through 100 {
    @each $unit, $ut in $unit {
        @each $position, $pos in $position {
            .m-#{$pos}-#{$size}#{$unit} {
                margin-#{$position}: #{$size}#{$ut};
            }
            .p-#{$pos}-#{$size}#{$unit} {
                padding-#{$position}: #{$size}#{$ut};
            }
        }
        .m-#{$size}#{$unit} {
            margin: #{$size}#{$ut};
        }
        .p-#{$size}#{$unit} {
            padding: #{$size}#{$ut};
        }
        .w-#{$size}#{$unit} {
            width: #{$size}#{$ut} !important;
        }
    }
}