82 lines
1.7 KiB
SCSS
82 lines
1.7 KiB
SCSS
@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();
|