Last active
January 18, 2023 22:52
-
-
Save LegitDongo/b847f595e2299bf71d5a1f4a0c5d2412 to your computer and use it in GitHub Desktop.
Bootstrap 4's margin/padding classes. Bootstrap changed their margin/padding right + left classes to start + end, this adds the old ones back to your SCSS file. Be sure to tree-shake!
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
// Notes | |
// * If adding alongside Bootstrap 5's margin/padding classes, you'll have to remove some stuff from this file so that there's not duplicate definitions. | |
// * Check the comments for details | |
// * XXL sizing was not included in Bootstrap 4, but added here for compatibility | |
////// remove the following variables if bootstrap is included in your SCSS ////////// | |
$grid-breakpoints: ( | |
xs: 0, | |
sm: 576px, | |
md: 768px, | |
lg: 992px, | |
xl: 1200px, | |
xxl: 1400px | |
) !default; | |
$spacer: 1rem !default; | |
$spacers: ( | |
0: 0, | |
1: $spacer * .25, | |
2: $spacer * .5, | |
3: $spacer, | |
4: $spacer * 1.5, | |
5: $spacer * 3, | |
) !default; | |
///////////////////////// | |
// margin and padding definition; if you're adding directly to Bootstrap 5, remove everything except `pr`, `pl`, `mr`, and `ml` | |
$space-prefixes: (p : padding, pt : padding-top, pr : padding-right, pb : padding-bottom, pl : padding-left, m : margin, mt : margin-top, mr : margin-right, mb : margin-bottom, ml : margin-left) !default; | |
@each $breakpoint-name, $breakpoint-value in $grid-breakpoints { | |
// don't use media queries if regular (ex. `pr-5`) | |
@if ($breakpoint-value == 0) { | |
@each $attr-short, $attr-long in $space-prefixes { | |
@each $name, $value in $spacers { | |
.#{$attr-short}-#{$name} { | |
#{$attr-long}: #{$value} !important; | |
} | |
} | |
.#{$attr-short}-auto { | |
#{$attr-long}: auto !important; | |
} | |
} | |
} | |
@else { | |
@media screen and (min-width: $breakpoint-value) { | |
@each $attr-short, $attr-long in $space-prefixes { | |
@each $name, $value in $spacers { | |
.#{$attr-short}-#{$breakpoint-name}-#{$name} { | |
#{$attr-long}: #{$value} !important; | |
} | |
} | |
.#{$attr-short}-#{$breakpoint-name}-auto { | |
#{$attr-long}: auto !important; | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment