bradsiefert/bootstrap4-spacer-extended.scss

## bootstrap4-spacer-extended.scss
// 8pt Spacers Extended
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
  0: 0,
  1: ($spacer * .25), 2: ($spacer * .5),   3: ($spacer * 1),   4: ($spacer * 1.5),
  5: ($spacer * 2),   6: ($spacer * 2.5),  7: ($spacer * 3),   8: ($spacer * 3.5),
  9: ($spacer * 4),   10: ($spacer * 4.5), 11: ($spacer * 5),  12: ($spacer * 6),
  13: ($spacer * 8),  14: ($spacer * 10),  15: ($spacer * 12), 16: ($spacer * 16)
), $spacers);

## explanation.md

      
    Raw
  

              explanation.md
            
          
    8pt Boostrap 4 Grid Update

The Bootstrap 4 $spacer is a really smart way of using rems of including spacing ulitilies. I love that they added it, but I use needed a few more spacing options than the 5 that are included by default.
Assuming that 1rem = 16px, here are the spacing options this gist creates.

0 = 0px
1 = 4px
2 = 8px
3 = 16px
4 = 24px
5 = 32px
6 = 40px
7 = 48px
8 = 56px
9 = 64px
10 = 72px
11 = 80px
12 = 96px
13 = 128px
14 = 160px
15 = 192px
16 = 256px

For more information about Boostrap 4 spacing: https://getbootstrap.com/docs/4.0/utilities/spacing/
Include the scss file before your @import of boostrap4 and it will update the sass variables.
	// 8pt Spacers Extended
	$spacer: 1rem !default;
	$spacers: () !default;
	$spacers: map-merge((
	0: 0,
	1: ($spacer * .25), 2: ($spacer * .5), 3: ($spacer * 1), 4: ($spacer * 1.5),
	5: ($spacer * 2), 6: ($spacer * 2.5), 7: ($spacer * 3), 8: ($spacer * 3.5),
	9: ($spacer * 4), 10: ($spacer * 4.5), 11: ($spacer * 5), 12: ($spacer * 6),
	13: ($spacer * 8), 14: ($spacer * 10), 15: ($spacer * 12), 16: ($spacer * 16)
	), $spacers);