Created
December 25, 2017 12:12
-
-
Save vsambor/0d8e15a65014a75c58a0c7c0dc6f34c7 to your computer and use it in GitHub Desktop.
SASS Margin and Padding Helper Generator
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 and Padding Helper Generator | |
| $space: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100); | |
| $pos: (top, bottom, left, right); | |
| @each $s in $space { | |
| .m#{$s} { margin: #{$s}px; } | |
| .p#{$s} { margin: #{$s}px; } | |
| @each $p in $pos { | |
| .m#{str-slice($p, 0, 1)}-#{$s} { margin-#{$p}: #{$s}px; } | |
| .p#{str-slice($p, 0, 1)}-#{$s} { padding-#{$p}: #{$s}px; } | |
| } | |
| } | |
| # Generated Result: | |
| .m0 { | |
| margin: 0px; | |
| } | |
| .p0 { | |
| margin: 0px; | |
| } | |
| .mt-0 { | |
| margin-top: 0px; | |
| } | |
| .pt-0 { | |
| padding-top: 0px; | |
| } | |
| .mb-0 { | |
| margin-bottom: 0px; | |
| } | |
| .pb-0 { | |
| padding-bottom: 0px; | |
| } | |
| .ml-0 { | |
| margin-left: 0px; | |
| } | |
| .pl-0 { | |
| padding-left: 0px; | |
| } | |
| .mr-0 { | |
| margin-right: 0px; | |
| } | |
| .pr-0 { | |
| padding-right: 0px; | |
| } | |
| .m1 { | |
| margin: 1px; | |
| } | |
| .p1 { | |
| margin: 1px; | |
| } | |
| .mt-1 { | |
| margin-top: 1px; | |
| } | |
| .pt-1 { | |
| padding-top: 1px; | |
| } | |
| .mb-1 { | |
| margin-bottom: 1px; | |
| } | |
| .pb-1 { | |
| padding-bottom: 1px; | |
| } | |
| .ml-1 { | |
| margin-left: 1px; | |
| } | |
| .pl-1 { | |
| padding-left: 1px; | |
| } | |
| .mr-1 { | |
| margin-right: 1px; | |
| } | |
| .pr-1 { | |
| padding-right: 1px; | |
| } | |
| .m2 { | |
| margin: 2px; | |
| } | |
| .p2 { | |
| margin: 2px; | |
| } | |
| .mt-2 { | |
| margin-top: 2px; | |
| } | |
| .pt-2 { | |
| padding-top: 2px; | |
| } | |
| .mb-2 { | |
| margin-bottom: 2px; | |
| } | |
| .pb-2 { | |
| padding-bottom: 2px; | |
| } | |
| .ml-2 { | |
| margin-left: 2px; | |
| } | |
| .pl-2 { | |
| padding-left: 2px; | |
| } | |
| .mr-2 { | |
| margin-right: 2px; | |
| } | |
| .pr-2 { | |
| padding-right: 2px; | |
| } | |
| .m3 { | |
| margin: 3px; | |
| } | |
| .p3 { | |
| margin: 3px; | |
| } | |
| .mt-3 { | |
| margin-top: 3px; | |
| } | |
| .pt-3 { | |
| padding-top: 3px; | |
| } | |
| .mb-3 { | |
| margin-bottom: 3px; | |
| } | |
| .pb-3 { | |
| padding-bottom: 3px; | |
| } | |
| .ml-3 { | |
| margin-left: 3px; | |
| } | |
| .pl-3 { | |
| padding-left: 3px; | |
| } | |
| .mr-3 { | |
| margin-right: 3px; | |
| } | |
| .pr-3 { | |
| padding-right: 3px; | |
| } | |
| .m4 { | |
| margin: 4px; | |
| } | |
| .p4 { | |
| margin: 4px; | |
| } | |
| .mt-4 { | |
| margin-top: 4px; | |
| } | |
| .pt-4 { | |
| padding-top: 4px; | |
| } | |
| .mb-4 { | |
| margin-bottom: 4px; | |
| } | |
| .pb-4 { | |
| padding-bottom: 4px; | |
| } | |
| .ml-4 { | |
| margin-left: 4px; | |
| } | |
| .pl-4 { | |
| padding-left: 4px; | |
| } | |
| .mr-4 { | |
| margin-right: 4px; | |
| } | |
| .pr-4 { | |
| padding-right: 4px; | |
| } | |
| .m5 { | |
| margin: 5px; | |
| } | |
| .p5 { | |
| margin: 5px; | |
| } | |
| .mt-5 { | |
| margin-top: 5px; | |
| } | |
| .pt-5 { | |
| padding-top: 5px; | |
| } | |
| .mb-5 { | |
| margin-bottom: 5px; | |
| } | |
| .pb-5 { | |
| padding-bottom: 5px; | |
| } | |
| .ml-5 { | |
| margin-left: 5px; | |
| } | |
| .pl-5 { | |
| padding-left: 5px; | |
| } | |
| .mr-5 { | |
| margin-right: 5px; | |
| } | |
| .pr-5 { | |
| padding-right: 5px; | |
| } | |
| .m6 { | |
| margin: 6px; | |
| } | |
| .p6 { | |
| margin: 6px; | |
| } | |
| .mt-6 { | |
| margin-top: 6px; | |
| } | |
| .pt-6 { | |
| padding-top: 6px; | |
| } | |
| .mb-6 { | |
| margin-bottom: 6px; | |
| } | |
| .pb-6 { | |
| padding-bottom: 6px; | |
| } | |
| .ml-6 { | |
| margin-left: 6px; | |
| } | |
| .pl-6 { | |
| padding-left: 6px; | |
| } | |
| .mr-6 { | |
| margin-right: 6px; | |
| } | |
| .pr-6 { | |
| padding-right: 6px; | |
| } | |
| .m7 { | |
| margin: 7px; | |
| } | |
| .p7 { | |
| margin: 7px; | |
| } | |
| .mt-7 { | |
| margin-top: 7px; | |
| } | |
| .pt-7 { | |
| padding-top: 7px; | |
| } | |
| .mb-7 { | |
| margin-bottom: 7px; | |
| } | |
| .pb-7 { | |
| padding-bottom: 7px; | |
| } | |
| .ml-7 { | |
| margin-left: 7px; | |
| } | |
| .pl-7 { | |
| padding-left: 7px; | |
| } | |
| .mr-7 { | |
| margin-right: 7px; | |
| } | |
| .pr-7 { | |
| padding-right: 7px; | |
| } | |
| .m8 { | |
| margin: 8px; | |
| } | |
| .p8 { | |
| margin: 8px; | |
| } | |
| .mt-8 { | |
| margin-top: 8px; | |
| } | |
| .pt-8 { | |
| padding-top: 8px; | |
| } | |
| .mb-8 { | |
| margin-bottom: 8px; | |
| } | |
| .pb-8 { | |
| padding-bottom: 8px; | |
| } | |
| .ml-8 { | |
| margin-left: 8px; | |
| } | |
| .pl-8 { | |
| padding-left: 8px; | |
| } | |
| .mr-8 { | |
| margin-right: 8px; | |
| } | |
| .pr-8 { | |
| padding-right: 8px; | |
| } | |
| .m9 { | |
| margin: 9px; | |
| } | |
| .p9 { | |
| margin: 9px; | |
| } | |
| .mt-9 { | |
| margin-top: 9px; | |
| } | |
| .pt-9 { | |
| padding-top: 9px; | |
| } | |
| .mb-9 { | |
| margin-bottom: 9px; | |
| } | |
| .pb-9 { | |
| padding-bottom: 9px; | |
| } | |
| .ml-9 { | |
| margin-left: 9px; | |
| } | |
| .pl-9 { | |
| padding-left: 9px; | |
| } | |
| .mr-9 { | |
| margin-right: 9px; | |
| } | |
| .pr-9 { | |
| padding-right: 9px; | |
| } | |
| .m10 { | |
| margin: 10px; | |
| } | |
| .p10 { | |
| margin: 10px; | |
| } | |
| .mt-10 { | |
| margin-top: 10px; | |
| } | |
| .pt-10 { | |
| padding-top: 10px; | |
| } | |
| .mb-10 { | |
| margin-bottom: 10px; | |
| } | |
| .pb-10 { | |
| padding-bottom: 10px; | |
| } | |
| .ml-10 { | |
| margin-left: 10px; | |
| } | |
| .pl-10 { | |
| padding-left: 10px; | |
| } | |
| .mr-10 { | |
| margin-right: 10px; | |
| } | |
| .pr-10 { | |
| padding-right: 10px; | |
| } | |
| .m15 { | |
| margin: 15px; | |
| } | |
| .p15 { | |
| margin: 15px; | |
| } | |
| .mt-15 { | |
| margin-top: 15px; | |
| } | |
| .pt-15 { | |
| padding-top: 15px; | |
| } | |
| .mb-15 { | |
| margin-bottom: 15px; | |
| } | |
| .pb-15 { | |
| padding-bottom: 15px; | |
| } | |
| .ml-15 { | |
| margin-left: 15px; | |
| } | |
| .pl-15 { | |
| padding-left: 15px; | |
| } | |
| .mr-15 { | |
| margin-right: 15px; | |
| } | |
| .pr-15 { | |
| padding-right: 15px; | |
| } | |
| .m20 { | |
| margin: 20px; | |
| } | |
| .p20 { | |
| margin: 20px; | |
| } | |
| .mt-20 { | |
| margin-top: 20px; | |
| } | |
| .pt-20 { | |
| padding-top: 20px; | |
| } | |
| .mb-20 { | |
| margin-bottom: 20px; | |
| } | |
| .pb-20 { | |
| padding-bottom: 20px; | |
| } | |
| .ml-20 { | |
| margin-left: 20px; | |
| } | |
| .pl-20 { | |
| padding-left: 20px; | |
| } | |
| .mr-20 { | |
| margin-right: 20px; | |
| } | |
| .pr-20 { | |
| padding-right: 20px; | |
| } | |
| .m25 { | |
| margin: 25px; | |
| } | |
| .p25 { | |
| margin: 25px; | |
| } | |
| .mt-25 { | |
| margin-top: 25px; | |
| } | |
| .pt-25 { | |
| padding-top: 25px; | |
| } | |
| .mb-25 { | |
| margin-bottom: 25px; | |
| } | |
| .pb-25 { | |
| padding-bottom: 25px; | |
| } | |
| .ml-25 { | |
| margin-left: 25px; | |
| } | |
| .pl-25 { | |
| padding-left: 25px; | |
| } | |
| .mr-25 { | |
| margin-right: 25px; | |
| } | |
| .pr-25 { | |
| padding-right: 25px; | |
| } | |
| .m30 { | |
| margin: 30px; | |
| } | |
| .p30 { | |
| margin: 30px; | |
| } | |
| .mt-30 { | |
| margin-top: 30px; | |
| } | |
| .pt-30 { | |
| padding-top: 30px; | |
| } | |
| .mb-30 { | |
| margin-bottom: 30px; | |
| } | |
| .pb-30 { | |
| padding-bottom: 30px; | |
| } | |
| .ml-30 { | |
| margin-left: 30px; | |
| } | |
| .pl-30 { | |
| padding-left: 30px; | |
| } | |
| .mr-30 { | |
| margin-right: 30px; | |
| } | |
| .pr-30 { | |
| padding-right: 30px; | |
| } | |
| .m35 { | |
| margin: 35px; | |
| } | |
| .p35 { | |
| margin: 35px; | |
| } | |
| .mt-35 { | |
| margin-top: 35px; | |
| } | |
| .pt-35 { | |
| padding-top: 35px; | |
| } | |
| .mb-35 { | |
| margin-bottom: 35px; | |
| } | |
| .pb-35 { | |
| padding-bottom: 35px; | |
| } | |
| .ml-35 { | |
| margin-left: 35px; | |
| } | |
| .pl-35 { | |
| padding-left: 35px; | |
| } | |
| .mr-35 { | |
| margin-right: 35px; | |
| } | |
| .pr-35 { | |
| padding-right: 35px; | |
| } | |
| .m40 { | |
| margin: 40px; | |
| } | |
| .p40 { | |
| margin: 40px; | |
| } | |
| .mt-40 { | |
| margin-top: 40px; | |
| } | |
| .pt-40 { | |
| padding-top: 40px; | |
| } | |
| .mb-40 { | |
| margin-bottom: 40px; | |
| } | |
| .pb-40 { | |
| padding-bottom: 40px; | |
| } | |
| .ml-40 { | |
| margin-left: 40px; | |
| } | |
| .pl-40 { | |
| padding-left: 40px; | |
| } | |
| .mr-40 { | |
| margin-right: 40px; | |
| } | |
| .pr-40 { | |
| padding-right: 40px; | |
| } | |
| .m45 { | |
| margin: 45px; | |
| } | |
| .p45 { | |
| margin: 45px; | |
| } | |
| .mt-45 { | |
| margin-top: 45px; | |
| } | |
| .pt-45 { | |
| padding-top: 45px; | |
| } | |
| .mb-45 { | |
| margin-bottom: 45px; | |
| } | |
| .pb-45 { | |
| padding-bottom: 45px; | |
| } | |
| .ml-45 { | |
| margin-left: 45px; | |
| } | |
| .pl-45 { | |
| padding-left: 45px; | |
| } | |
| .mr-45 { | |
| margin-right: 45px; | |
| } | |
| .pr-45 { | |
| padding-right: 45px; | |
| } | |
| .m50 { | |
| margin: 50px; | |
| } | |
| .p50 { | |
| margin: 50px; | |
| } | |
| .mt-50 { | |
| margin-top: 50px; | |
| } | |
| .pt-50 { | |
| padding-top: 50px; | |
| } | |
| .mb-50 { | |
| margin-bottom: 50px; | |
| } | |
| .pb-50 { | |
| padding-bottom: 50px; | |
| } | |
| .ml-50 { | |
| margin-left: 50px; | |
| } | |
| .pl-50 { | |
| padding-left: 50px; | |
| } | |
| .mr-50 { | |
| margin-right: 50px; | |
| } | |
| .pr-50 { | |
| padding-right: 50px; | |
| } | |
| .m75 { | |
| margin: 75px; | |
| } | |
| .p75 { | |
| margin: 75px; | |
| } | |
| .mt-75 { | |
| margin-top: 75px; | |
| } | |
| .pt-75 { | |
| padding-top: 75px; | |
| } | |
| .mb-75 { | |
| margin-bottom: 75px; | |
| } | |
| .pb-75 { | |
| padding-bottom: 75px; | |
| } | |
| .ml-75 { | |
| margin-left: 75px; | |
| } | |
| .pl-75 { | |
| padding-left: 75px; | |
| } | |
| .mr-75 { | |
| margin-right: 75px; | |
| } | |
| .pr-75 { | |
| padding-right: 75px; | |
| } | |
| .m100 { | |
| margin: 100px; | |
| } | |
| .p100 { | |
| margin: 100px; | |
| } | |
| .mt-100 { | |
| margin-top: 100px; | |
| } | |
| .pt-100 { | |
| padding-top: 100px; | |
| } | |
| .mb-100 { | |
| margin-bottom: 100px; | |
| } | |
| .pb-100 { | |
| padding-bottom: 100px; | |
| } | |
| .ml-100 { | |
| margin-left: 100px; | |
| } | |
| .pl-100 { | |
| padding-left: 100px; | |
| } | |
| .mr-100 { | |
| margin-right: 100px; | |
| } | |
| .pr-100 { | |
| padding-right: 100px; | |
| } | |
| #Thank you! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Typo on line 8, it should be: