@mixin fn($space,$direction,$size,$n) { @if $n { #{$space}-#{$direction}: #{$size*$uni-space-root}px } @else { #{$space}-#{$direction}: #{-$size*$uni-space-root}px } } @mixin get-styles($direction,$i,$space,$n){ @if $direction == t { @include fn($space, top,$i,$n); } @if $direction == r { @include fn($space, right,$i,$n); } @if $direction == b { @include fn($space, bottom,$i,$n); } @if $direction == l { @include fn($space, left,$i,$n); } @if $direction == x { @include fn($space, left,$i,$n); @include fn($space, right,$i,$n); } @if $direction == y { @include fn($space, top,$i,$n); @include fn($space, bottom,$i,$n); } @if $direction == a { @if $n { #{$space}:#{$i*$uni-space-root}px; } @else { #{$space}:#{-$i*$uni-space-root}px; } } } @each $orientation in m,p { $space: margin; @if $orientation == m { $space: margin; } @else { $space: padding; } @for $i from 0 through 16 { @each $direction in t, r, b, l, x, y, a { .uni-#{$orientation}#{$direction}-#{$i} { @include get-styles($direction,$i,$space,true); } .uni-#{$orientation}#{$direction}-n#{$i} { @include get-styles($direction,$i,$space,false); } } } }