// =Spacing
$spacing-scale: scale(spacing);
@each $name, $index in $spacing-scale {
    .p-#{$name}   { padding: $unit * $index; }
}
@each $name, $index in $spacing-scale {
    .my-#{$name}  { margin-top: $unit * $index; margin-bottom: $unit * $index; }
    .mx-#{$name}  { margin-left: $unit * $index; margin-right: $unit * $index; }
    .py-#{$name}  { padding-top: $unit * $index; padding-bottom: $unit * $index; }
    .px-#{$name}  { padding-left: $unit * $index; padding-right: $unit * $index; }
}
@each $name, $index in $spacing-scale {
    .mb-#{$name}  { margin-bottom: $unit * $index; }
    .mt-#{$name}  { margin-top: $unit * $index; }
    .ml-#{$name}  { margin-left: $unit * $index; }
    .mr-#{$name}  { margin-right: $unit * $index; }
    .mb-n#{$name} { margin-bottom: -($unit * $index); }
    .mt-n#{$name} { margin-top: -($unit * $index); }
    .ml-n#{$name} { margin-left: -($unit * $index); }
    .mr-n#{$name} { margin-right: -($unit * $index); }
    .pt-#{$name}  { padding-top: $unit * $index; }
    .pb-#{$name}  { padding-bottom: $unit * $index; }
    .pl-#{$name}  { padding-left: $unit * $index; }
    .pr-#{$name}  { padding-right: $unit * $index; }
}
@include for-sm {
    .mt-off-sm { margin-top: 0; }
    .mb-off-sm { margin-bottom: 0; }
    .ml-off-sm { margin-left: 0; }
    .mr-off-sm { margin-right: 0; }
    .my-off-sm { margin-top: 0; margin-bottom: 0; }
    .mx-off-sm { margin-left: 0; margin-right: 0; }
    .p-off-sm  { padding: 0; }
    .pt-off-sm { padding-top: 0; }
    .pb-off-sm { padding-bottom: 0; }
    .pl-off-sm { padding-left: 0; }
    .pr-off-sm { padding-right: 0; }
    .py-off-sm { padding-top: 0; padding-bottom: 0; }
    .px-off-sm { padding-left: 0; padding-right: 0; }

    @each $name, $index in $spacing-scale {
        .p-#{$name}-sm   { padding: $unit * $index; }
    }
    @each $name, $index in $spacing-scale {
        .my-#{$name}-sm  { margin-top: $unit * $index; margin-bottom: $unit * $index; }
        .mx-#{$name}-sm  { margin-left: $unit * $index; margin-right: $unit * $index; }
        .py-#{$name}-sm  { padding-top: $unit * $index; padding-bottom: $unit * $index; }
        .px-#{$name}-sm  { padding-left: $unit * $index; padding-right: $unit * $index; }
    }
    @each $name, $index in $spacing-scale {
        .mb-#{$name}-sm  { margin-bottom: $unit * $index; }
        .mt-#{$name}-sm  { margin-top: $unit * $index; }
        .ml-#{$name}-sm  { margin-left: $unit * $index; }
        .mr-#{$name}-sm  { margin-right: $unit * $index; }
        .mb-n#{$name}-sm { margin-bottom: -($unit * $index); }
        .mt-n#{$name}-sm { margin-top: -($unit * $index); }
        .ml-n#{$name}-sm { margin-left: -($unit * $index); }
        .mr-n#{$name}-sm { margin-right: -($unit * $index); }
        .pt-#{$name}-sm  { padding-top: $unit * $index; }
        .pb-#{$name}-sm  { padding-bottom: $unit * $index; }
        .pl-#{$name}-sm  { padding-left: $unit * $index; }
        .pr-#{$name}-sm  { padding-right: $unit * $index; }
    }
}