Skip to content

Instantly share code, notes, and snippets.

@redrohX
Created January 19, 2021 10:14
Show Gist options
  • Save redrohX/552da646ebe6dce296413e6f96f66efc to your computer and use it in GitHub Desktop.
Save redrohX/552da646ebe6dce296413e6f96f66efc to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use "sass:list";
// THIS FILE IS GENERATED
$spacing-1: 0.313;
$spacing-2: 0.5;
$spacing-3: 0.625;
$spacing-4: 0.938;
$spacing-5: 1.25;
$spacing-6: 1.875;
$spacing-7: 3.125;
$valid-spacings: 'xxs', 'xs', 'sm', 'default', 'md', 'lg', 'xl', 'xxl';
$valid-positions: top, bottom, left, right, horizontal, vertical, x, y, none, '';
$spacing-list: (
'xxs': $spacing-1,
'xs': $spacing-2,
'sm': $spacing-3,
'default': $spacing-4,
'md': $spacing-4,
'lg': $spacing-5,
'xl': $spacing-6,
'xxl': $spacing-7
);
@mixin spacing($type, $pos, $size: md) {
$getSize: map-get($spacing-list, $size);
@if (not list.index([margin, padding], $type)) {
@error "#{$type} is not a spacing type. Expected margin or padding";
}
@if not list.index($valid-positions, $pos) {
@error "#{$pos} is not a valid position. Expected one of #{$valid-positions}.";
}
@if not list.index($valid-spacings, $size) {
@error "#{$size} is not a size. Expected one of #{$valid-spacings}";
}
@if ($pos == none or $pos == '') {
#{$type}: #{$getSize}rem;
} @else if ($pos == 'vertical' or $pos == 'y') {
#{$type}-top: #{$getSize}rem;
#{$type}-bottom: #{$getSize}rem;
} @else if ($pos == 'horizontal' or $pos == 'x') {
#{$type}-left: #{$getSize}rem;
#{$type}-right: #{$getSize}rem;
} @else {
#{$type}-#{$pos}: #{$getSize}rem;
}
}
.foo {
@include spacing(padding, top, md);
}
.bar {
@include spacing(margin, bottom, lg);
}
.baz {
@include spacing(margin, '', sm);
@include spacing(padding, none, md);
}
.fiz {
@include spacing(padding, left, sm);
}
.flaps {
@include spacing(padding, vertical, sm);
@include spacing(margin, y, sm);
}
.flapsz {
@include spacing(padding, horizontal, sm);
@include spacing(margin, x, sm);
}
.faz {
@include spacing(margin, right, sm);
}
.foo {
padding-top: 0.938rem;
}
.bar {
margin-bottom: 1.25rem;
}
.baz {
margin: 0.625rem;
padding: 0.938rem;
}
.fiz {
padding-left: 0.625rem;
}
.flaps {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
.flapsz {
padding-left: 0.625rem;
padding-right: 0.625rem;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.faz {
margin-right: 0.625rem;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment