Last active
December 16, 2021 21:43
-
-
Save angelolucas/2406632747285786b76b5884f3dccec8 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.4em; | |
| // 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: 0px; | |
| } | |
| .margin-1 { | |
| margin: 4px; | |
| } | |
| .margin-2 { | |
| margin: 8px; | |
| } | |
| .margin-3 { | |
| margin: 12px; | |
| } | |
| .margin-4 { | |
| margin: 16px; | |
| } | |
| .margin-5 { | |
| margin: 20px; | |
| } | |
| .margin-6 { | |
| margin: 24px; | |
| } | |
| .margin-7 { | |
| margin: 28px; | |
| } | |
| .margin-8 { | |
| margin: 32px; | |
| } | |
| .margin-9 { | |
| margin: 36px; | |
| } | |
| .margin-10 { | |
| margin: 40px; | |
| } | |
| .margin-11 { | |
| margin: 44px; | |
| } | |
| .margin-12 { | |
| margin: 48px; | |
| } | |
| .margin-13 { | |
| margin: 52px; | |
| } | |
| .margin-auto { | |
| margin: auto; | |
| } | |
| .marginTop-0 { | |
| margin-top: 0px; | |
| } | |
| .marginTop-1 { | |
| margin-top: 4px; | |
| } | |
| .marginTop-2 { | |
| margin-top: 8px; | |
| } | |
| .marginTop-3 { | |
| margin-top: 12px; | |
| } | |
| .marginTop-4 { | |
| margin-top: 16px; | |
| } | |
| .marginTop-5 { | |
| margin-top: 20px; | |
| } | |
| .marginTop-6 { | |
| margin-top: 24px; | |
| } | |
| .marginTop-7 { | |
| margin-top: 28px; | |
| } | |
| .marginTop-8 { | |
| margin-top: 32px; | |
| } | |
| .marginTop-9 { | |
| margin-top: 36px; | |
| } | |
| .marginTop-10 { | |
| margin-top: 40px; | |
| } | |
| .marginTop-11 { | |
| margin-top: 44px; | |
| } | |
| .marginTop-12 { | |
| margin-top: 48px; | |
| } | |
| .marginTop-13 { | |
| margin-top: 52px; | |
| } | |
| .marginTop-auto { | |
| margin-top: auto; | |
| } | |
| .marginRight-0 { | |
| margin-right: 0px; | |
| } | |
| .marginRight-1 { | |
| margin-right: 4px; | |
| } | |
| .marginRight-2 { | |
| margin-right: 8px; | |
| } | |
| .marginRight-3 { | |
| margin-right: 12px; | |
| } | |
| .marginRight-4 { | |
| margin-right: 16px; | |
| } | |
| .marginRight-5 { | |
| margin-right: 20px; | |
| } | |
| .marginRight-6 { | |
| margin-right: 24px; | |
| } | |
| .marginRight-7 { | |
| margin-right: 28px; | |
| } | |
| .marginRight-8 { | |
| margin-right: 32px; | |
| } | |
| .marginRight-9 { | |
| margin-right: 36px; | |
| } | |
| .marginRight-10 { | |
| margin-right: 40px; | |
| } | |
| .marginRight-11 { | |
| margin-right: 44px; | |
| } | |
| .marginRight-12 { | |
| margin-right: 48px; | |
| } | |
| .marginRight-13 { | |
| margin-right: 52px; | |
| } | |
| .marginRight-auto { | |
| margin-right: auto; | |
| } | |
| .marginBottom-0 { | |
| margin-bottom: 0px; | |
| } | |
| .marginBottom-1 { | |
| margin-bottom: 4px; | |
| } | |
| .marginBottom-2 { | |
| margin-bottom: 8px; | |
| } | |
| .marginBottom-3 { | |
| margin-bottom: 12px; | |
| } | |
| .marginBottom-4 { | |
| margin-bottom: 16px; | |
| } | |
| .marginBottom-5 { | |
| margin-bottom: 20px; | |
| } | |
| .marginBottom-6 { | |
| margin-bottom: 24px; | |
| } | |
| .marginBottom-7 { | |
| margin-bottom: 28px; | |
| } | |
| .marginBottom-8 { | |
| margin-bottom: 32px; | |
| } | |
| .marginBottom-9 { | |
| margin-bottom: 36px; | |
| } | |
| .marginBottom-10 { | |
| margin-bottom: 40px; | |
| } | |
| .marginBottom-11 { | |
| margin-bottom: 44px; | |
| } | |
| .marginBottom-12 { | |
| margin-bottom: 48px; | |
| } | |
| .marginBottom-13 { | |
| margin-bottom: 52px; | |
| } | |
| .marginBottom-auto { | |
| margin-bottom: auto; | |
| } | |
| .marginLeft-0 { | |
| margin-left: 0px; | |
| } | |
| .marginLeft-1 { | |
| margin-left: 4px; | |
| } | |
| .marginLeft-2 { | |
| margin-left: 8px; | |
| } | |
| .marginLeft-3 { | |
| margin-left: 12px; | |
| } | |
| .marginLeft-4 { | |
| margin-left: 16px; | |
| } | |
| .marginLeft-5 { | |
| margin-left: 20px; | |
| } | |
| .marginLeft-6 { | |
| margin-left: 24px; | |
| } | |
| .marginLeft-7 { | |
| margin-left: 28px; | |
| } | |
| .marginLeft-8 { | |
| margin-left: 32px; | |
| } | |
| .marginLeft-9 { | |
| margin-left: 36px; | |
| } | |
| .marginLeft-10 { | |
| margin-left: 40px; | |
| } | |
| .marginLeft-11 { | |
| margin-left: 44px; | |
| } | |
| .marginLeft-12 { | |
| margin-left: 48px; | |
| } | |
| .marginLeft-13 { | |
| margin-left: 52px; | |
| } | |
| .marginLeft-auto { | |
| margin-left: auto; | |
| } | |
| .marginX-0 { | |
| margin-left: 0px; | |
| margin-right: 0px; | |
| } | |
| .marginX-1 { | |
| margin-left: 4px; | |
| margin-right: 4px; | |
| } | |
| .marginX-2 { | |
| margin-left: 8px; | |
| margin-right: 8px; | |
| } | |
| .marginX-3 { | |
| margin-left: 12px; | |
| margin-right: 12px; | |
| } | |
| .marginX-4 { | |
| margin-left: 16px; | |
| margin-right: 16px; | |
| } | |
| .marginX-5 { | |
| margin-left: 20px; | |
| margin-right: 20px; | |
| } | |
| .marginX-6 { | |
| margin-left: 24px; | |
| margin-right: 24px; | |
| } | |
| .marginX-7 { | |
| margin-left: 28px; | |
| margin-right: 28px; | |
| } | |
| .marginX-8 { | |
| margin-left: 32px; | |
| margin-right: 32px; | |
| } | |
| .marginX-9 { | |
| margin-left: 36px; | |
| margin-right: 36px; | |
| } | |
| .marginX-10 { | |
| margin-left: 40px; | |
| margin-right: 40px; | |
| } | |
| .marginX-11 { | |
| margin-left: 44px; | |
| margin-right: 44px; | |
| } | |
| .marginX-12 { | |
| margin-left: 48px; | |
| margin-right: 48px; | |
| } | |
| .marginX-13 { | |
| margin-left: 52px; | |
| margin-right: 52px; | |
| } | |
| .marginX-auto { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .marginY-0 { | |
| margin-top: 0px; | |
| margin-bottom: 0px; | |
| } | |
| .marginY-1 { | |
| margin-top: 4px; | |
| margin-bottom: 4px; | |
| } | |
| .marginY-2 { | |
| margin-top: 8px; | |
| margin-bottom: 8px; | |
| } | |
| .marginY-3 { | |
| margin-top: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .marginY-4 { | |
| margin-top: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .marginY-5 { | |
| margin-top: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .marginY-6 { | |
| margin-top: 24px; | |
| margin-bottom: 24px; | |
| } | |
| .marginY-7 { | |
| margin-top: 28px; | |
| margin-bottom: 28px; | |
| } | |
| .marginY-8 { | |
| margin-top: 32px; | |
| margin-bottom: 32px; | |
| } | |
| .marginY-9 { | |
| margin-top: 36px; | |
| margin-bottom: 36px; | |
| } | |
| .marginY-10 { | |
| margin-top: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .marginY-11 { | |
| margin-top: 44px; | |
| margin-bottom: 44px; | |
| } | |
| .marginY-12 { | |
| margin-top: 48px; | |
| margin-bottom: 48px; | |
| } | |
| .marginY-13 { | |
| margin-top: 52px; | |
| margin-bottom: 52px; | |
| } | |
| .marginY-auto { | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| } | |
| .padding-0 { | |
| padding: 0px; | |
| } | |
| .padding-1 { | |
| padding: 4px; | |
| } | |
| .padding-2 { | |
| padding: 8px; | |
| } | |
| .padding-3 { | |
| padding: 12px; | |
| } | |
| .padding-4 { | |
| padding: 16px; | |
| } | |
| .padding-5 { | |
| padding: 20px; | |
| } | |
| .padding-6 { | |
| padding: 24px; | |
| } | |
| .padding-7 { | |
| padding: 28px; | |
| } | |
| .padding-8 { | |
| padding: 32px; | |
| } | |
| .padding-9 { | |
| padding: 36px; | |
| } | |
| .padding-10 { | |
| padding: 40px; | |
| } | |
| .padding-11 { | |
| padding: 44px; | |
| } | |
| .padding-12 { | |
| padding: 48px; | |
| } | |
| .padding-13 { | |
| padding: 52px; | |
| } | |
| .padding-auto { | |
| padding: auto; | |
| } | |
| .paddingTop-0 { | |
| padding-top: 0px; | |
| } | |
| .paddingTop-1 { | |
| padding-top: 4px; | |
| } | |
| .paddingTop-2 { | |
| padding-top: 8px; | |
| } | |
| .paddingTop-3 { | |
| padding-top: 12px; | |
| } | |
| .paddingTop-4 { | |
| padding-top: 16px; | |
| } | |
| .paddingTop-5 { | |
| padding-top: 20px; | |
| } | |
| .paddingTop-6 { | |
| padding-top: 24px; | |
| } | |
| .paddingTop-7 { | |
| padding-top: 28px; | |
| } | |
| .paddingTop-8 { | |
| padding-top: 32px; | |
| } | |
| .paddingTop-9 { | |
| padding-top: 36px; | |
| } | |
| .paddingTop-10 { | |
| padding-top: 40px; | |
| } | |
| .paddingTop-11 { | |
| padding-top: 44px; | |
| } | |
| .paddingTop-12 { | |
| padding-top: 48px; | |
| } | |
| .paddingTop-13 { | |
| padding-top: 52px; | |
| } | |
| .paddingTop-auto { | |
| padding-top: auto; | |
| } | |
| .paddingRight-0 { | |
| padding-right: 0px; | |
| } | |
| .paddingRight-1 { | |
| padding-right: 4px; | |
| } | |
| .paddingRight-2 { | |
| padding-right: 8px; | |
| } | |
| .paddingRight-3 { | |
| padding-right: 12px; | |
| } | |
| .paddingRight-4 { | |
| padding-right: 16px; | |
| } | |
| .paddingRight-5 { | |
| padding-right: 20px; | |
| } | |
| .paddingRight-6 { | |
| padding-right: 24px; | |
| } | |
| .paddingRight-7 { | |
| padding-right: 28px; | |
| } | |
| .paddingRight-8 { | |
| padding-right: 32px; | |
| } | |
| .paddingRight-9 { | |
| padding-right: 36px; | |
| } | |
| .paddingRight-10 { | |
| padding-right: 40px; | |
| } | |
| .paddingRight-11 { | |
| padding-right: 44px; | |
| } | |
| .paddingRight-12 { | |
| padding-right: 48px; | |
| } | |
| .paddingRight-13 { | |
| padding-right: 52px; | |
| } | |
| .paddingRight-auto { | |
| padding-right: auto; | |
| } | |
| .paddingBottom-0 { | |
| padding-bottom: 0px; | |
| } | |
| .paddingBottom-1 { | |
| padding-bottom: 4px; | |
| } | |
| .paddingBottom-2 { | |
| padding-bottom: 8px; | |
| } | |
| .paddingBottom-3 { | |
| padding-bottom: 12px; | |
| } | |
| .paddingBottom-4 { | |
| padding-bottom: 16px; | |
| } | |
| .paddingBottom-5 { | |
| padding-bottom: 20px; | |
| } | |
| .paddingBottom-6 { | |
| padding-bottom: 24px; | |
| } | |
| .paddingBottom-7 { | |
| padding-bottom: 28px; | |
| } | |
| .paddingBottom-8 { | |
| padding-bottom: 32px; | |
| } | |
| .paddingBottom-9 { | |
| padding-bottom: 36px; | |
| } | |
| .paddingBottom-10 { | |
| padding-bottom: 40px; | |
| } | |
| .paddingBottom-11 { | |
| padding-bottom: 44px; | |
| } | |
| .paddingBottom-12 { | |
| padding-bottom: 48px; | |
| } | |
| .paddingBottom-13 { | |
| padding-bottom: 52px; | |
| } | |
| .paddingBottom-auto { | |
| padding-bottom: auto; | |
| } | |
| .paddingLeft-0 { | |
| padding-left: 0px; | |
| } | |
| .paddingLeft-1 { | |
| padding-left: 4px; | |
| } | |
| .paddingLeft-2 { | |
| padding-left: 8px; | |
| } | |
| .paddingLeft-3 { | |
| padding-left: 12px; | |
| } | |
| .paddingLeft-4 { | |
| padding-left: 16px; | |
| } | |
| .paddingLeft-5 { | |
| padding-left: 20px; | |
| } | |
| .paddingLeft-6 { | |
| padding-left: 24px; | |
| } | |
| .paddingLeft-7 { | |
| padding-left: 28px; | |
| } | |
| .paddingLeft-8 { | |
| padding-left: 32px; | |
| } | |
| .paddingLeft-9 { | |
| padding-left: 36px; | |
| } | |
| .paddingLeft-10 { | |
| padding-left: 40px; | |
| } | |
| .paddingLeft-11 { | |
| padding-left: 44px; | |
| } | |
| .paddingLeft-12 { | |
| padding-left: 48px; | |
| } | |
| .paddingLeft-13 { | |
| padding-left: 52px; | |
| } | |
| .paddingLeft-auto { | |
| padding-left: auto; | |
| } | |
| .paddingX-0 { | |
| padding-left: 0px; | |
| padding-right: 0px; | |
| } | |
| .paddingX-1 { | |
| padding-left: 4px; | |
| padding-right: 4px; | |
| } | |
| .paddingX-2 { | |
| padding-left: 8px; | |
| padding-right: 8px; | |
| } | |
| .paddingX-3 { | |
| padding-left: 12px; | |
| padding-right: 12px; | |
| } | |
| .paddingX-4 { | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| } | |
| .paddingX-5 { | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| .paddingX-6 { | |
| padding-left: 24px; | |
| padding-right: 24px; | |
| } | |
| .paddingX-7 { | |
| padding-left: 28px; | |
| padding-right: 28px; | |
| } | |
| .paddingX-8 { | |
| padding-left: 32px; | |
| padding-right: 32px; | |
| } | |
| .paddingX-9 { | |
| padding-left: 36px; | |
| padding-right: 36px; | |
| } | |
| .paddingX-10 { | |
| padding-left: 40px; | |
| padding-right: 40px; | |
| } | |
| .paddingX-11 { | |
| padding-left: 44px; | |
| padding-right: 44px; | |
| } | |
| .paddingX-12 { | |
| padding-left: 48px; | |
| padding-right: 48px; | |
| } | |
| .paddingX-13 { | |
| padding-left: 52px; | |
| padding-right: 52px; | |
| } | |
| .paddingX-auto { | |
| padding-left: auto; | |
| padding-right: auto; | |
| } | |
| .paddingY-0 { | |
| padding-top: 0px; | |
| padding-bottom: 0px; | |
| } | |
| .paddingY-1 { | |
| padding-top: 4px; | |
| padding-bottom: 4px; | |
| } | |
| .paddingY-2 { | |
| padding-top: 8px; | |
| padding-bottom: 8px; | |
| } | |
| .paddingY-3 { | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| } | |
| .paddingY-4 { | |
| padding-top: 16px; | |
| padding-bottom: 16px; | |
| } | |
| .paddingY-5 { | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .paddingY-6 { | |
| padding-top: 24px; | |
| padding-bottom: 24px; | |
| } | |
| .paddingY-7 { | |
| padding-top: 28px; | |
| padding-bottom: 28px; | |
| } | |
| .paddingY-8 { | |
| padding-top: 32px; | |
| padding-bottom: 32px; | |
| } | |
| .paddingY-9 { | |
| padding-top: 36px; | |
| padding-bottom: 36px; | |
| } | |
| .paddingY-10 { | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .paddingY-11 { | |
| padding-top: 44px; | |
| padding-bottom: 44px; | |
| } | |
| .paddingY-12 { | |
| padding-top: 48px; | |
| padding-bottom: 48px; | |
| } | |
| .paddingY-13 { | |
| padding-top: 52px; | |
| padding-bottom: 52px; | |
| } | |
| .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