Last active
September 4, 2019 07:33
-
-
Save micheletolve/d0039634937a181aa091ec38270d27ea to your computer and use it in GitHub Desktop.
This generates .m-t-10 or p-t-10 type helper classes.
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
/* | |
***UPDATED: modified as bootstrap 4 classes | |
This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects. | |
It will generate several classes such as: | |
.mr-10 which gives margin-right 10 pixels. | |
.mr-15 gives MARGIN to the RIGHT 15 pixels. | |
.mt-15 gives MARGIN to the TOP 15 pixels and so on. | |
.pb-5 gives PADDING to the BOTTOM of 5 pixels | |
.pl-40 gives PADDING to the LEFT of 40 pixels | |
The first letter is "m" or "p" for MARGIN or PADDING | |
Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT | |
Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below. | |
*/ | |
$spaces: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100); // Change this to variate the pixel amount desired | |
$sides: (top, bottom, left, right); // Do not touch this variables | |
@each $space in $spaces { | |
@each $side in $sides { | |
.m#{str-slice($side, 0, 1)}-#{$space} { | |
margin-#{$side}: #{$space}px !important; | |
} | |
.p#{str-slice($side, 0, 1)}-#{$space} { | |
padding-#{$side}: #{$space}px !important; | |
} | |
} | |
} | |
/* | |
RUN GULP to generate the classes. Now you can use these helpers to customize spacing on HTML elements. | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment