layout.scss

$margin-list: 0 2 5 10 15 20;

@each $mg in $margin-list {
    .mx-#{$mg} {
        margin-left: #{$mg}px !important;
        margin-right: #{$mg}px !important;
    }

    .my-#{$mg} {
        margin-top: #{$mg}px !important;
        margin-bottom: #{$mg}px !important;
    }

    .px-#{$mg} {
        padding-left: #{$mg}px !important;
        padding-right: #{$mg}px !important;
    }

    .py-#{$mg} {
        padding-top: #{$mg}px !important;
        padding-bottom: #{$mg}px !important;
    }

    .mt-#{$mg} {
        margin-top: #{$mg}px !important;
    }

    .ml-#{$mg} {
        margin-left: #{$mg}px !important;
    }

    .mr-#{$mg} {
        margin-right: #{$mg}px !important;
    }

    .mb-#{$mg} {
        margin-bottom: #{$mg}px !important;
    }

    .pt-#{$mg} {
        padding-top: #{$mg}px !important;
    }

    .pl-#{$mg} {
        padding-left: #{$mg}px !important;
    }

    .pr-#{$mg} {
        padding-right: #{$mg}px !important;
    }

    .pb-#{$mg} {
        padding-bottom: #{$mg}px !important;
    }
}