52 lines
1.8 KiB
SCSS
52 lines
1.8 KiB
SCSS
$sizeUnit: rem;
|
|
$marginKey: "m";
|
|
$paddingKey: "p";
|
|
$separator: "-";
|
|
$sizes: (("0", 0), ("xxs", 0.125), ("xs", 0.25), ("sm", 0.5), ("md", 1), ("lg", 2), ("xl", 4), ("xxl", 8));
|
|
$positions: (("t", "top"), ("r", "right"), ("b", "bottom"), ("l", "left"), ("x", "x"), ("y", "y"), ("a", "around"));
|
|
|
|
@function sizeValue($key, $value) {
|
|
@return if($key == "0", 0, $value + $sizeUnit);
|
|
}
|
|
|
|
@each $size in $sizes {
|
|
$sizeKey: nth($size, 1);
|
|
$sizeValue: nth($size, 2);
|
|
.#{$marginKey}#{$separator}#{$sizeKey} {
|
|
margin: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
.#{$paddingKey}#{$separator}#{$sizeKey} {
|
|
padding: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
@each $position in $positions {
|
|
$posKey: nth($position, 1);
|
|
$posValue: nth($position, 2);
|
|
.#{$marginKey}#{$posKey}#{$separator}#{$sizeKey} {
|
|
@if $posValue == "x" {
|
|
margin-left: sizeValue($sizeKey, $sizeValue);
|
|
margin-right: sizeValue($sizeKey, $sizeValue);
|
|
} @else if $posValue == "y" {
|
|
margin-top: sizeValue($sizeKey, $sizeValue);
|
|
margin-bottom: sizeValue($sizeKey, $sizeValue);
|
|
} @else if $posValue == "around" {
|
|
margin: sizeValue($sizeKey, $sizeValue);
|
|
} @else {
|
|
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
}
|
|
.#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} {
|
|
@if $posValue == "x" {
|
|
padding-left: sizeValue($sizeKey, $sizeValue);
|
|
padding-right: sizeValue($sizeKey, $sizeValue);
|
|
} @else if $posValue == "y" {
|
|
padding-top: sizeValue($sizeKey, $sizeValue);
|
|
padding-bottom: sizeValue($sizeKey, $sizeValue);
|
|
} @else if $posValue == "around" {
|
|
padding: sizeValue($sizeKey, $sizeValue);
|
|
} @else {
|
|
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
}
|
|
}
|
|
}
|