Last active
March 16, 2022 14:10
-
-
Save httpJunkie/7b33303f8624c0e9ac7cf4242cc07cf6 to your computer and use it in GitHub Desktop.
Standard margin and padding loop with Sass
This file contains hidden or 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
| $amounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100); | |
| $sides: (top, right, bottom, left); | |
| @each $space in $amounts { | |
| @each $side in $sides { | |
| .margin-#{$side}-#{$space} { | |
| margin-#{$side}: #{$space}px !important; | |
| } | |
| .padding-#{$side}-#{$space} { | |
| padding-#{$side}: #{$space}px !important; | |
| } | |
| } | |
| } |
This file contains hidden or 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-top-5 { | |
| margin-top: 5px !important; | |
| } | |
| .padding-top-5 { | |
| padding-top: 5px !important; | |
| } | |
| .margin-right-5 { | |
| margin-right: 5px !important; | |
| } | |
| .padding-right-5 { | |
| padding-right: 5px !important; | |
| } | |
| .margin-bottom-5 { | |
| margin-bottom: 5px !important; | |
| } | |
| .padding-bottom-5 { | |
| padding-bottom: 5px !important; | |
| } | |
| .margin-left-5 { | |
| margin-left: 5px !important; | |
| } | |
| .padding-left-5 { | |
| padding-left: 5px !important; | |
| } | |
| .margin-top-10 { | |
| margin-top: 10px !important; | |
| } | |
| .padding-top-10 { | |
| padding-top: 10px !important; | |
| } | |
| .margin-right-10 { | |
| margin-right: 10px !important; | |
| } | |
| .padding-right-10 { | |
| padding-right: 10px !important; | |
| } | |
| .margin-bottom-10 { | |
| margin-bottom: 10px !important; | |
| } | |
| .padding-bottom-10 { | |
| padding-bottom: 10px !important; | |
| } | |
| .margin-left-10 { | |
| margin-left: 10px !important; | |
| } | |
| .padding-left-10 { | |
| padding-left: 10px !important; | |
| } | |
| .margin-top-15 { | |
| margin-top: 15px !important; | |
| } | |
| .padding-top-15 { | |
| padding-top: 15px !important; | |
| } | |
| .margin-right-15 { | |
| margin-right: 15px !important; | |
| } | |
| .padding-right-15 { | |
| padding-right: 15px !important; | |
| } | |
| .margin-bottom-15 { | |
| margin-bottom: 15px !important; | |
| } | |
| .padding-bottom-15 { | |
| padding-bottom: 15px !important; | |
| } | |
| .margin-left-15 { | |
| margin-left: 15px !important; | |
| } | |
| .padding-left-15 { | |
| padding-left: 15px !important; | |
| } | |
| .margin-top-20 { | |
| margin-top: 20px !important; | |
| } | |
| .padding-top-20 { | |
| padding-top: 20px !important; | |
| } | |
| .margin-right-20 { | |
| margin-right: 20px !important; | |
| } | |
| .padding-right-20 { | |
| padding-right: 20px !important; | |
| } | |
| .margin-bottom-20 { | |
| margin-bottom: 20px !important; | |
| } | |
| .padding-bottom-20 { | |
| padding-bottom: 20px !important; | |
| } | |
| .margin-left-20 { | |
| margin-left: 20px !important; | |
| } | |
| .padding-left-20 { | |
| padding-left: 20px !important; | |
| } | |
| .margin-top-25 { | |
| margin-top: 25px !important; | |
| } | |
| .padding-top-25 { | |
| padding-top: 25px !important; | |
| } | |
| .margin-right-25 { | |
| margin-right: 25px !important; | |
| } | |
| .padding-right-25 { | |
| padding-right: 25px !important; | |
| } | |
| .margin-bottom-25 { | |
| margin-bottom: 25px !important; | |
| } | |
| .padding-bottom-25 { | |
| padding-bottom: 25px !important; | |
| } | |
| .margin-left-25 { | |
| margin-left: 25px !important; | |
| } | |
| .padding-left-25 { | |
| padding-left: 25px !important; | |
| } | |
| .margin-top-30 { | |
| margin-top: 30px !important; | |
| } | |
| .padding-top-30 { | |
| padding-top: 30px !important; | |
| } | |
| .margin-right-30 { | |
| margin-right: 30px !important; | |
| } | |
| .padding-right-30 { | |
| padding-right: 30px !important; | |
| } | |
| .margin-bottom-30 { | |
| margin-bottom: 30px !important; | |
| } | |
| .padding-bottom-30 { | |
| padding-bottom: 30px !important; | |
| } | |
| .margin-left-30 { | |
| margin-left: 30px !important; | |
| } | |
| .padding-left-30 { | |
| padding-left: 30px !important; | |
| } | |
| .margin-top-35 { | |
| margin-top: 35px !important; | |
| } | |
| .padding-top-35 { | |
| padding-top: 35px !important; | |
| } | |
| .margin-right-35 { | |
| margin-right: 35px !important; | |
| } | |
| .padding-right-35 { | |
| padding-right: 35px !important; | |
| } | |
| .margin-bottom-35 { | |
| margin-bottom: 35px !important; | |
| } | |
| .padding-bottom-35 { | |
| padding-bottom: 35px !important; | |
| } | |
| .margin-left-35 { | |
| margin-left: 35px !important; | |
| } | |
| .padding-left-35 { | |
| padding-left: 35px !important; | |
| } | |
| .margin-top-40 { | |
| margin-top: 40px !important; | |
| } | |
| .padding-top-40 { | |
| padding-top: 40px !important; | |
| } | |
| .margin-right-40 { | |
| margin-right: 40px !important; | |
| } | |
| .padding-right-40 { | |
| padding-right: 40px !important; | |
| } | |
| .margin-bottom-40 { | |
| margin-bottom: 40px !important; | |
| } | |
| .padding-bottom-40 { | |
| padding-bottom: 40px !important; | |
| } | |
| .margin-left-40 { | |
| margin-left: 40px !important; | |
| } | |
| .padding-left-40 { | |
| padding-left: 40px !important; | |
| } | |
| .margin-top-45 { | |
| margin-top: 45px !important; | |
| } | |
| .padding-top-45 { | |
| padding-top: 45px !important; | |
| } | |
| .margin-right-45 { | |
| margin-right: 45px !important; | |
| } | |
| .padding-right-45 { | |
| padding-right: 45px !important; | |
| } | |
| .margin-bottom-45 { | |
| margin-bottom: 45px !important; | |
| } | |
| .padding-bottom-45 { | |
| padding-bottom: 45px !important; | |
| } | |
| .margin-left-45 { | |
| margin-left: 45px !important; | |
| } | |
| .padding-left-45 { | |
| padding-left: 45px !important; | |
| } | |
| .margin-top-50 { | |
| margin-top: 50px !important; | |
| } | |
| .padding-top-50 { | |
| padding-top: 50px !important; | |
| } | |
| .margin-right-50 { | |
| margin-right: 50px !important; | |
| } | |
| .padding-right-50 { | |
| padding-right: 50px !important; | |
| } | |
| .margin-bottom-50 { | |
| margin-bottom: 50px !important; | |
| } | |
| .padding-bottom-50 { | |
| padding-bottom: 50px !important; | |
| } | |
| .margin-left-50 { | |
| margin-left: 50px !important; | |
| } | |
| .padding-left-50 { | |
| padding-left: 50px !important; | |
| } | |
| .margin-top-75 { | |
| margin-top: 75px !important; | |
| } | |
| .padding-top-75 { | |
| padding-top: 75px !important; | |
| } | |
| .margin-right-75 { | |
| margin-right: 75px !important; | |
| } | |
| .padding-right-75 { | |
| padding-right: 75px !important; | |
| } | |
| .margin-bottom-75 { | |
| margin-bottom: 75px !important; | |
| } | |
| .padding-bottom-75 { | |
| padding-bottom: 75px !important; | |
| } | |
| .margin-left-75 { | |
| margin-left: 75px !important; | |
| } | |
| .padding-left-75 { | |
| padding-left: 75px !important; | |
| } | |
| .margin-top-100 { | |
| margin-top: 100px !important; | |
| } | |
| .padding-top-100 { | |
| padding-top: 100px !important; | |
| } | |
| .margin-right-100 { | |
| margin-right: 100px !important; | |
| } | |
| .padding-right-100 { | |
| padding-right: 100px !important; | |
| } | |
| .margin-bottom-100 { | |
| margin-bottom: 100px !important; | |
| } | |
| .padding-bottom-100 { | |
| padding-bottom: 100px !important; | |
| } | |
| .margin-left-100 { | |
| margin-left: 100px !important; | |
| } | |
| .padding-left-100 { | |
| padding-left: 100px !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment