
$steps: (0, 6, 10, 20, 40);
$positions: ((k: l, t: left, ), (k:t, t: top), (k: b, t:bottom), (k: r, t: right));

.msp-margin {
    &.m-0 {
        margin: 0px;
    }
    &.m-6 {
        margin: 60px;
    }
    &.m-10 {
        margin: 10px;
    }
    &.m-20 {
        margin: 20px;
    }
    &.m-40 {
        margin: 40px;
    }

    @for $i from 1 through length($steps) {
        $item-s: nth($steps,$i);
        @for $j from 1 through length($positions) {
            $item-p: nth($positions, $j);
            $item-p-k: map-get($item-p,k);
            $item-p-v: map-get($item-p,t);
            &.m-#{$item-p-k}-#{$item-s} {
                margin-#{$item-p-v}: #{$item-s}px;
            }
        }
    }
}

// Adjacent Sibling Selector
.msp-margin-as {
    & + .msp-margin-as {
        @for $i from 1 through length($steps) {
        $item-s: nth($steps,$i);
        @for $j from 1 through length($positions) {
            $item-p: nth($positions, $j);
            $item-p-k: map-get($item-p,k);
            $item-p-v: map-get($item-p,t);
            &.m-#{$item-p-k}-#{$item-s} {
                margin-#{$item-p-v}: #{$item-s}px;
            }
        }
    }
    }
}
