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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
@mixin make-spacing($property, $side, $spacer, $negative: false) {
$css_property: null;
$css_sides: null;
@if ($property == "m") {
$css_property: "margin";
} @else if ($property == "p") {
$css_property: "padding";
}
@if ($side == "t") {
$css_sides: ("top");
}
@else if ($side == "b") {
$css_sides: ("bottom");
}
@else if ($side == "l") {
$css_sides: ("left");
}
@else if ($side == "r") {
$css_sides: ("right");
}
@else if ($side == "x") {
$css_sides: ("left", "right");
}
@else if ($side == "y") {
$css_sides: ("top", "bottom");
}
@else if ($side == "") {
$css_sides: ("");
}
@each $side in $css_sides {
@if ($spacer == "auto") {
@if ($side == "") {
#{$css_property}: auto;
} @else {
#{$css_property}-#{$side}: auto;
}
} @else {
@if ($side == "") {
@if ($negative == true) {
#{$css_property}: - map-get($spacers, $spacer);
} @else {
#{$css_property}: map-get($spacers, $spacer);
}
} @else {
@if ($negative == true) {
#{$css_property}-#{$side}: - map-get($spacers, $spacer);
} @else {
#{$css_property}-#{$side}: map-get($spacers, $spacer);
}
}
}
}
}
@mixin make-spacings() {
$propertys: ("m", "p");
$sides: ("t", "b", "l", "r", "x", "y", "");
$spacers: (0, 1, 2, 3, 4, 5);
@each $property in $propertys {
@each $side in $sides {
@each $spacer in $spacers {
.#{$property}#{$side}-#{$spacer} {
@include make-spacing($property, $side, $spacer);
}
}
}
}
@each $side in $sides {
.m#{$side}-auto {
@include make-spacing("m", $side, "auto");
}
}
}
@include make-spacings();
|
