Created
December 16, 2021 21:34
-
-
Save angelolucas/b81369450b24e0d8b82ba54089b1418c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.5.4) | |
// ---- | |
@mixin generate($prefix, $property, $secondProperty: '') { | |
// List of sizes to generate for each | |
$sizes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; | |
// Spacing to multiply the sizes by | |
$spacing: 0.4rem; | |
// Loop through all of the sizes(we use @for rather than @each, as we want access to the index) | |
@for $i from 1 through length($sizes) { | |
// Get the size for the current index | |
$size: nth($sizes, $i); | |
$selector: #{$prefix}-#{$i - 1}; | |
$value: $spacing * $size; | |
// Create the rule | |
.#{$selector} { | |
#{$property}: $value; | |
@if ($secondProperty != '') { | |
#{$secondProperty}: $value; | |
} | |
} | |
} | |
// Crete the auto rule | |
.#{$prefix}-auto { | |
#{$property}: auto; | |
@if ($secondProperty != '') { | |
#{$secondProperty}: auto; | |
} | |
} | |
} | |
// create margin rules | |
@include generate(margin, margin); | |
@include generate(marginTop, margin-top); | |
@include generate(marginRight, margin-right); | |
@include generate(marginBottom, margin-bottom); | |
@include generate(marginLeft, margin-left); | |
@include generate(marginX, margin-left, margin-right); | |
@include generate(marginY, margin-top, margin-bottom); | |
// create padding rules | |
@include generate(padding, padding); | |
@include generate(paddingTop, padding-top); | |
@include generate(paddingRight, padding-right); | |
@include generate(paddingBottom, padding-bottom); | |
@include generate(paddingLeft, padding-left); | |
@include generate(paddingX, padding-left, padding-right); | |
@include generate(paddingY, padding-top, padding-bottom); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.margin-0 { | |
margin: 0rem; | |
} | |
.margin-1 { | |
margin: 0.4rem; | |
} | |
.margin-2 { | |
margin: 0.8rem; | |
} | |
.margin-3 { | |
margin: 1.2rem; | |
} | |
.margin-4 { | |
margin: 1.6rem; | |
} | |
.margin-5 { | |
margin: 2rem; | |
} | |
.margin-6 { | |
margin: 2.4rem; | |
} | |
.margin-7 { | |
margin: 2.8rem; | |
} | |
.margin-8 { | |
margin: 3.2rem; | |
} | |
.margin-9 { | |
margin: 3.6rem; | |
} | |
.margin-10 { | |
margin: 4rem; | |
} | |
.margin-11 { | |
margin: 4.4rem; | |
} | |
.margin-12 { | |
margin: 4.8rem; | |
} | |
.margin-13 { | |
margin: 5.2rem; | |
} | |
.margin-auto { | |
margin: auto; | |
} | |
.marginTop-0 { | |
margin-top: 0rem; | |
} | |
.marginTop-1 { | |
margin-top: 0.4rem; | |
} | |
.marginTop-2 { | |
margin-top: 0.8rem; | |
} | |
.marginTop-3 { | |
margin-top: 1.2rem; | |
} | |
.marginTop-4 { | |
margin-top: 1.6rem; | |
} | |
.marginTop-5 { | |
margin-top: 2rem; | |
} | |
.marginTop-6 { | |
margin-top: 2.4rem; | |
} | |
.marginTop-7 { | |
margin-top: 2.8rem; | |
} | |
.marginTop-8 { | |
margin-top: 3.2rem; | |
} | |
.marginTop-9 { | |
margin-top: 3.6rem; | |
} | |
.marginTop-10 { | |
margin-top: 4rem; | |
} | |
.marginTop-11 { | |
margin-top: 4.4rem; | |
} | |
.marginTop-12 { | |
margin-top: 4.8rem; | |
} | |
.marginTop-13 { | |
margin-top: 5.2rem; | |
} | |
.marginTop-auto { | |
margin-top: auto; | |
} | |
.marginRight-0 { | |
margin-right: 0rem; | |
} | |
.marginRight-1 { | |
margin-right: 0.4rem; | |
} | |
.marginRight-2 { | |
margin-right: 0.8rem; | |
} | |
.marginRight-3 { | |
margin-right: 1.2rem; | |
} | |
.marginRight-4 { | |
margin-right: 1.6rem; | |
} | |
.marginRight-5 { | |
margin-right: 2rem; | |
} | |
.marginRight-6 { | |
margin-right: 2.4rem; | |
} | |
.marginRight-7 { | |
margin-right: 2.8rem; | |
} | |
.marginRight-8 { | |
margin-right: 3.2rem; | |
} | |
.marginRight-9 { | |
margin-right: 3.6rem; | |
} | |
.marginRight-10 { | |
margin-right: 4rem; | |
} | |
.marginRight-11 { | |
margin-right: 4.4rem; | |
} | |
.marginRight-12 { | |
margin-right: 4.8rem; | |
} | |
.marginRight-13 { | |
margin-right: 5.2rem; | |
} | |
.marginRight-auto { | |
margin-right: auto; | |
} | |
.marginBottom-0 { | |
margin-bottom: 0rem; | |
} | |
.marginBottom-1 { | |
margin-bottom: 0.4rem; | |
} | |
.marginBottom-2 { | |
margin-bottom: 0.8rem; | |
} | |
.marginBottom-3 { | |
margin-bottom: 1.2rem; | |
} | |
.marginBottom-4 { | |
margin-bottom: 1.6rem; | |
} | |
.marginBottom-5 { | |
margin-bottom: 2rem; | |
} | |
.marginBottom-6 { | |
margin-bottom: 2.4rem; | |
} | |
.marginBottom-7 { | |
margin-bottom: 2.8rem; | |
} | |
.marginBottom-8 { | |
margin-bottom: 3.2rem; | |
} | |
.marginBottom-9 { | |
margin-bottom: 3.6rem; | |
} | |
.marginBottom-10 { | |
margin-bottom: 4rem; | |
} | |
.marginBottom-11 { | |
margin-bottom: 4.4rem; | |
} | |
.marginBottom-12 { | |
margin-bottom: 4.8rem; | |
} | |
.marginBottom-13 { | |
margin-bottom: 5.2rem; | |
} | |
.marginBottom-auto { | |
margin-bottom: auto; | |
} | |
.marginLeft-0 { | |
margin-left: 0rem; | |
} | |
.marginLeft-1 { | |
margin-left: 0.4rem; | |
} | |
.marginLeft-2 { | |
margin-left: 0.8rem; | |
} | |
.marginLeft-3 { | |
margin-left: 1.2rem; | |
} | |
.marginLeft-4 { | |
margin-left: 1.6rem; | |
} | |
.marginLeft-5 { | |
margin-left: 2rem; | |
} | |
.marginLeft-6 { | |
margin-left: 2.4rem; | |
} | |
.marginLeft-7 { | |
margin-left: 2.8rem; | |
} | |
.marginLeft-8 { | |
margin-left: 3.2rem; | |
} | |
.marginLeft-9 { | |
margin-left: 3.6rem; | |
} | |
.marginLeft-10 { | |
margin-left: 4rem; | |
} | |
.marginLeft-11 { | |
margin-left: 4.4rem; | |
} | |
.marginLeft-12 { | |
margin-left: 4.8rem; | |
} | |
.marginLeft-13 { | |
margin-left: 5.2rem; | |
} | |
.marginLeft-auto { | |
margin-left: auto; | |
} | |
.marginX-0 { | |
margin-left: 0rem; | |
margin-right: 0rem; | |
} | |
.marginX-1 { | |
margin-left: 0.4rem; | |
margin-right: 0.4rem; | |
} | |
.marginX-2 { | |
margin-left: 0.8rem; | |
margin-right: 0.8rem; | |
} | |
.marginX-3 { | |
margin-left: 1.2rem; | |
margin-right: 1.2rem; | |
} | |
.marginX-4 { | |
margin-left: 1.6rem; | |
margin-right: 1.6rem; | |
} | |
.marginX-5 { | |
margin-left: 2rem; | |
margin-right: 2rem; | |
} | |
.marginX-6 { | |
margin-left: 2.4rem; | |
margin-right: 2.4rem; | |
} | |
.marginX-7 { | |
margin-left: 2.8rem; | |
margin-right: 2.8rem; | |
} | |
.marginX-8 { | |
margin-left: 3.2rem; | |
margin-right: 3.2rem; | |
} | |
.marginX-9 { | |
margin-left: 3.6rem; | |
margin-right: 3.6rem; | |
} | |
.marginX-10 { | |
margin-left: 4rem; | |
margin-right: 4rem; | |
} | |
.marginX-11 { | |
margin-left: 4.4rem; | |
margin-right: 4.4rem; | |
} | |
.marginX-12 { | |
margin-left: 4.8rem; | |
margin-right: 4.8rem; | |
} | |
.marginX-13 { | |
margin-left: 5.2rem; | |
margin-right: 5.2rem; | |
} | |
.marginX-auto { | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.marginY-0 { | |
margin-top: 0rem; | |
margin-bottom: 0rem; | |
} | |
.marginY-1 { | |
margin-top: 0.4rem; | |
margin-bottom: 0.4rem; | |
} | |
.marginY-2 { | |
margin-top: 0.8rem; | |
margin-bottom: 0.8rem; | |
} | |
.marginY-3 { | |
margin-top: 1.2rem; | |
margin-bottom: 1.2rem; | |
} | |
.marginY-4 { | |
margin-top: 1.6rem; | |
margin-bottom: 1.6rem; | |
} | |
.marginY-5 { | |
margin-top: 2rem; | |
margin-bottom: 2rem; | |
} | |
.marginY-6 { | |
margin-top: 2.4rem; | |
margin-bottom: 2.4rem; | |
} | |
.marginY-7 { | |
margin-top: 2.8rem; | |
margin-bottom: 2.8rem; | |
} | |
.marginY-8 { | |
margin-top: 3.2rem; | |
margin-bottom: 3.2rem; | |
} | |
.marginY-9 { | |
margin-top: 3.6rem; | |
margin-bottom: 3.6rem; | |
} | |
.marginY-10 { | |
margin-top: 4rem; | |
margin-bottom: 4rem; | |
} | |
.marginY-11 { | |
margin-top: 4.4rem; | |
margin-bottom: 4.4rem; | |
} | |
.marginY-12 { | |
margin-top: 4.8rem; | |
margin-bottom: 4.8rem; | |
} | |
.marginY-13 { | |
margin-top: 5.2rem; | |
margin-bottom: 5.2rem; | |
} | |
.marginY-auto { | |
margin-top: auto; | |
margin-bottom: auto; | |
} | |
.padding-0 { | |
padding: 0rem; | |
} | |
.padding-1 { | |
padding: 0.4rem; | |
} | |
.padding-2 { | |
padding: 0.8rem; | |
} | |
.padding-3 { | |
padding: 1.2rem; | |
} | |
.padding-4 { | |
padding: 1.6rem; | |
} | |
.padding-5 { | |
padding: 2rem; | |
} | |
.padding-6 { | |
padding: 2.4rem; | |
} | |
.padding-7 { | |
padding: 2.8rem; | |
} | |
.padding-8 { | |
padding: 3.2rem; | |
} | |
.padding-9 { | |
padding: 3.6rem; | |
} | |
.padding-10 { | |
padding: 4rem; | |
} | |
.padding-11 { | |
padding: 4.4rem; | |
} | |
.padding-12 { | |
padding: 4.8rem; | |
} | |
.padding-13 { | |
padding: 5.2rem; | |
} | |
.padding-auto { | |
padding: auto; | |
} | |
.paddingTop-0 { | |
padding-top: 0rem; | |
} | |
.paddingTop-1 { | |
padding-top: 0.4rem; | |
} | |
.paddingTop-2 { | |
padding-top: 0.8rem; | |
} | |
.paddingTop-3 { | |
padding-top: 1.2rem; | |
} | |
.paddingTop-4 { | |
padding-top: 1.6rem; | |
} | |
.paddingTop-5 { | |
padding-top: 2rem; | |
} | |
.paddingTop-6 { | |
padding-top: 2.4rem; | |
} | |
.paddingTop-7 { | |
padding-top: 2.8rem; | |
} | |
.paddingTop-8 { | |
padding-top: 3.2rem; | |
} | |
.paddingTop-9 { | |
padding-top: 3.6rem; | |
} | |
.paddingTop-10 { | |
padding-top: 4rem; | |
} | |
.paddingTop-11 { | |
padding-top: 4.4rem; | |
} | |
.paddingTop-12 { | |
padding-top: 4.8rem; | |
} | |
.paddingTop-13 { | |
padding-top: 5.2rem; | |
} | |
.paddingTop-auto { | |
padding-top: auto; | |
} | |
.paddingRight-0 { | |
padding-right: 0rem; | |
} | |
.paddingRight-1 { | |
padding-right: 0.4rem; | |
} | |
.paddingRight-2 { | |
padding-right: 0.8rem; | |
} | |
.paddingRight-3 { | |
padding-right: 1.2rem; | |
} | |
.paddingRight-4 { | |
padding-right: 1.6rem; | |
} | |
.paddingRight-5 { | |
padding-right: 2rem; | |
} | |
.paddingRight-6 { | |
padding-right: 2.4rem; | |
} | |
.paddingRight-7 { | |
padding-right: 2.8rem; | |
} | |
.paddingRight-8 { | |
padding-right: 3.2rem; | |
} | |
.paddingRight-9 { | |
padding-right: 3.6rem; | |
} | |
.paddingRight-10 { | |
padding-right: 4rem; | |
} | |
.paddingRight-11 { | |
padding-right: 4.4rem; | |
} | |
.paddingRight-12 { | |
padding-right: 4.8rem; | |
} | |
.paddingRight-13 { | |
padding-right: 5.2rem; | |
} | |
.paddingRight-auto { | |
padding-right: auto; | |
} | |
.paddingBottom-0 { | |
padding-bottom: 0rem; | |
} | |
.paddingBottom-1 { | |
padding-bottom: 0.4rem; | |
} | |
.paddingBottom-2 { | |
padding-bottom: 0.8rem; | |
} | |
.paddingBottom-3 { | |
padding-bottom: 1.2rem; | |
} | |
.paddingBottom-4 { | |
padding-bottom: 1.6rem; | |
} | |
.paddingBottom-5 { | |
padding-bottom: 2rem; | |
} | |
.paddingBottom-6 { | |
padding-bottom: 2.4rem; | |
} | |
.paddingBottom-7 { | |
padding-bottom: 2.8rem; | |
} | |
.paddingBottom-8 { | |
padding-bottom: 3.2rem; | |
} | |
.paddingBottom-9 { | |
padding-bottom: 3.6rem; | |
} | |
.paddingBottom-10 { | |
padding-bottom: 4rem; | |
} | |
.paddingBottom-11 { | |
padding-bottom: 4.4rem; | |
} | |
.paddingBottom-12 { | |
padding-bottom: 4.8rem; | |
} | |
.paddingBottom-13 { | |
padding-bottom: 5.2rem; | |
} | |
.paddingBottom-auto { | |
padding-bottom: auto; | |
} | |
.paddingLeft-0 { | |
padding-left: 0rem; | |
} | |
.paddingLeft-1 { | |
padding-left: 0.4rem; | |
} | |
.paddingLeft-2 { | |
padding-left: 0.8rem; | |
} | |
.paddingLeft-3 { | |
padding-left: 1.2rem; | |
} | |
.paddingLeft-4 { | |
padding-left: 1.6rem; | |
} | |
.paddingLeft-5 { | |
padding-left: 2rem; | |
} | |
.paddingLeft-6 { | |
padding-left: 2.4rem; | |
} | |
.paddingLeft-7 { | |
padding-left: 2.8rem; | |
} | |
.paddingLeft-8 { | |
padding-left: 3.2rem; | |
} | |
.paddingLeft-9 { | |
padding-left: 3.6rem; | |
} | |
.paddingLeft-10 { | |
padding-left: 4rem; | |
} | |
.paddingLeft-11 { | |
padding-left: 4.4rem; | |
} | |
.paddingLeft-12 { | |
padding-left: 4.8rem; | |
} | |
.paddingLeft-13 { | |
padding-left: 5.2rem; | |
} | |
.paddingLeft-auto { | |
padding-left: auto; | |
} | |
.paddingX-0 { | |
padding-left: 0rem; | |
padding-right: 0rem; | |
} | |
.paddingX-1 { | |
padding-left: 0.4rem; | |
padding-right: 0.4rem; | |
} | |
.paddingX-2 { | |
padding-left: 0.8rem; | |
padding-right: 0.8rem; | |
} | |
.paddingX-3 { | |
padding-left: 1.2rem; | |
padding-right: 1.2rem; | |
} | |
.paddingX-4 { | |
padding-left: 1.6rem; | |
padding-right: 1.6rem; | |
} | |
.paddingX-5 { | |
padding-left: 2rem; | |
padding-right: 2rem; | |
} | |
.paddingX-6 { | |
padding-left: 2.4rem; | |
padding-right: 2.4rem; | |
} | |
.paddingX-7 { | |
padding-left: 2.8rem; | |
padding-right: 2.8rem; | |
} | |
.paddingX-8 { | |
padding-left: 3.2rem; | |
padding-right: 3.2rem; | |
} | |
.paddingX-9 { | |
padding-left: 3.6rem; | |
padding-right: 3.6rem; | |
} | |
.paddingX-10 { | |
padding-left: 4rem; | |
padding-right: 4rem; | |
} | |
.paddingX-11 { | |
padding-left: 4.4rem; | |
padding-right: 4.4rem; | |
} | |
.paddingX-12 { | |
padding-left: 4.8rem; | |
padding-right: 4.8rem; | |
} | |
.paddingX-13 { | |
padding-left: 5.2rem; | |
padding-right: 5.2rem; | |
} | |
.paddingX-auto { | |
padding-left: auto; | |
padding-right: auto; | |
} | |
.paddingY-0 { | |
padding-top: 0rem; | |
padding-bottom: 0rem; | |
} | |
.paddingY-1 { | |
padding-top: 0.4rem; | |
padding-bottom: 0.4rem; | |
} | |
.paddingY-2 { | |
padding-top: 0.8rem; | |
padding-bottom: 0.8rem; | |
} | |
.paddingY-3 { | |
padding-top: 1.2rem; | |
padding-bottom: 1.2rem; | |
} | |
.paddingY-4 { | |
padding-top: 1.6rem; | |
padding-bottom: 1.6rem; | |
} | |
.paddingY-5 { | |
padding-top: 2rem; | |
padding-bottom: 2rem; | |
} | |
.paddingY-6 { | |
padding-top: 2.4rem; | |
padding-bottom: 2.4rem; | |
} | |
.paddingY-7 { | |
padding-top: 2.8rem; | |
padding-bottom: 2.8rem; | |
} | |
.paddingY-8 { | |
padding-top: 3.2rem; | |
padding-bottom: 3.2rem; | |
} | |
.paddingY-9 { | |
padding-top: 3.6rem; | |
padding-bottom: 3.6rem; | |
} | |
.paddingY-10 { | |
padding-top: 4rem; | |
padding-bottom: 4rem; | |
} | |
.paddingY-11 { | |
padding-top: 4.4rem; | |
padding-bottom: 4.4rem; | |
} | |
.paddingY-12 { | |
padding-top: 4.8rem; | |
padding-bottom: 4.8rem; | |
} | |
.paddingY-13 { | |
padding-top: 5.2rem; | |
padding-bottom: 5.2rem; | |
} | |
.paddingY-auto { | |
padding-top: auto; | |
padding-bottom: auto; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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