Skip to content

Instantly share code, notes, and snippets.

@zastrow
Last active March 4, 2022 14:34
Show Gist options
  • Save zastrow/54e6ecc67cb8ea66aef4e6bdb3c4f3ef to your computer and use it in GitHub Desktop.
Save zastrow/54e6ecc67cb8ea66aef4e6bdb3c4f3ef to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
> 1%
last 2 versions
// ----
// libsass (v3.5.4)
// ----
$spacing-limit: 4;
$spacing-key: (
"top": "top",
"right": "right",
"left": "left",
"btm": "bottom",
"all": null,
"vert": null,
"horiz": null
);
@mixin spacing-loop($property, $space, $value) {
@each $poskey, $posvalue in $spacing-key {
&-#{$poskey}-#{$space} {
@if $poskey == "all" {
#{$property}: $value;
}
@else if $poskey == "vert" {
#{$property}-top: $value;
#{$property}-bottom: $value;
}
@else if $poskey == "horiz" {
#{$property}-right: $value;
#{$property}-left: $value;
}
@else {
#{$property}-#{$posvalue}: $value;
}
}
}
}
@for $space from 0 through $spacing-limit {
$value: $space + rem;
.util-pad {
@include spacing-loop("padding", $space, $value);
}
.util-margin {
@include spacing-loop("margin", $space, $value);
}
}
.util-pad-top-0 {
padding-top: 0rem;
}
.util-pad-right-0 {
padding-right: 0rem;
}
.util-pad-left-0 {
padding-left: 0rem;
}
.util-pad-btm-0 {
padding-bottom: 0rem;
}
.util-pad-all-0 {
padding: 0rem;
}
.util-pad-vert-0 {
padding-top: 0rem;
padding-bottom: 0rem;
}
.util-pad-horiz-0 {
padding-right: 0rem;
padding-left: 0rem;
}
.util-margin-top-0 {
margin-top: 0rem;
}
.util-margin-right-0 {
margin-right: 0rem;
}
.util-margin-left-0 {
margin-left: 0rem;
}
.util-margin-btm-0 {
margin-bottom: 0rem;
}
.util-margin-all-0 {
margin: 0rem;
}
.util-margin-vert-0 {
margin-top: 0rem;
margin-bottom: 0rem;
}
.util-margin-horiz-0 {
margin-right: 0rem;
margin-left: 0rem;
}
.util-pad-top-1 {
padding-top: 1rem;
}
.util-pad-right-1 {
padding-right: 1rem;
}
.util-pad-left-1 {
padding-left: 1rem;
}
.util-pad-btm-1 {
padding-bottom: 1rem;
}
.util-pad-all-1 {
padding: 1rem;
}
.util-pad-vert-1 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.util-pad-horiz-1 {
padding-right: 1rem;
padding-left: 1rem;
}
.util-margin-top-1 {
margin-top: 1rem;
}
.util-margin-right-1 {
margin-right: 1rem;
}
.util-margin-left-1 {
margin-left: 1rem;
}
.util-margin-btm-1 {
margin-bottom: 1rem;
}
.util-margin-all-1 {
margin: 1rem;
}
.util-margin-vert-1 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.util-margin-horiz-1 {
margin-right: 1rem;
margin-left: 1rem;
}
.util-pad-top-2 {
padding-top: 2rem;
}
.util-pad-right-2 {
padding-right: 2rem;
}
.util-pad-left-2 {
padding-left: 2rem;
}
.util-pad-btm-2 {
padding-bottom: 2rem;
}
.util-pad-all-2 {
padding: 2rem;
}
.util-pad-vert-2 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.util-pad-horiz-2 {
padding-right: 2rem;
padding-left: 2rem;
}
.util-margin-top-2 {
margin-top: 2rem;
}
.util-margin-right-2 {
margin-right: 2rem;
}
.util-margin-left-2 {
margin-left: 2rem;
}
.util-margin-btm-2 {
margin-bottom: 2rem;
}
.util-margin-all-2 {
margin: 2rem;
}
.util-margin-vert-2 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.util-margin-horiz-2 {
margin-right: 2rem;
margin-left: 2rem;
}
.util-pad-top-3 {
padding-top: 3rem;
}
.util-pad-right-3 {
padding-right: 3rem;
}
.util-pad-left-3 {
padding-left: 3rem;
}
.util-pad-btm-3 {
padding-bottom: 3rem;
}
.util-pad-all-3 {
padding: 3rem;
}
.util-pad-vert-3 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.util-pad-horiz-3 {
padding-right: 3rem;
padding-left: 3rem;
}
.util-margin-top-3 {
margin-top: 3rem;
}
.util-margin-right-3 {
margin-right: 3rem;
}
.util-margin-left-3 {
margin-left: 3rem;
}
.util-margin-btm-3 {
margin-bottom: 3rem;
}
.util-margin-all-3 {
margin: 3rem;
}
.util-margin-vert-3 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.util-margin-horiz-3 {
margin-right: 3rem;
margin-left: 3rem;
}
.util-pad-top-4 {
padding-top: 4rem;
}
.util-pad-right-4 {
padding-right: 4rem;
}
.util-pad-left-4 {
padding-left: 4rem;
}
.util-pad-btm-4 {
padding-bottom: 4rem;
}
.util-pad-all-4 {
padding: 4rem;
}
.util-pad-vert-4 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.util-pad-horiz-4 {
padding-right: 4rem;
padding-left: 4rem;
}
.util-margin-top-4 {
margin-top: 4rem;
}
.util-margin-right-4 {
margin-right: 4rem;
}
.util-margin-left-4 {
margin-left: 4rem;
}
.util-margin-btm-4 {
margin-bottom: 4rem;
}
.util-margin-all-4 {
margin: 4rem;
}
.util-margin-vert-4 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.util-margin-horiz-4 {
margin-right: 4rem;
margin-left: 4rem;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {
"libsass": "3.5.4"
},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment