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: