| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 | |   |  | @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); |  |             } |  |         } |  |     } |  | } | 
 |