// =Offset
[class^="offset-"],
[class*=" offset-"] {
    position: relative;
}

// =Scale
$spacing-scale: scale(spacing);
@each $name, $index in $spacing-scale {
    .offset-left-#{$name}   { left: -($unit * $index); }
    .offset-right-#{$name}  { right: -($unit * $index); }
    .offset-top-#{$name}    { top: -($unit * $index); }
    .offset-bottom-#{$name} { bottom: -($unit * $index); }
}
@include for-sm {
    .offset-off-sm        { left: initial; right: initial; top: initial; bottom: initial; }
    .offset-left-off-sm   { left: initial; }
    .offset-right-off-sm  { right: initial; }
    .offset-top-off-sm    { top: initial; }
    .offset-bottom-off-sm { bottom: initial; }

    @each $name, $index in $spacing-scale {
        .offset-left-#{$name}-sm   { left: -($unit * $index); }
        .offset-right-#{$name}-sm  { right: -($unit * $index); }
        .offset-top-#{$name}-sm    { top: -($unit * $index); }
        .offset-bottom-#{$name}-sm { bottom: -($unit * $index); }
    }
}