I'm trying my hand at scss using Bootstrap 4 and I don't know how to overwrite variable (using map) correclty
custom.scss
// Your variable overrides
$primary: rgb(40, 167, 36);
$spacer: 1;
$spacers: (
0: 0,
1: ($spacer * .2),
2: ($spacer * 3),
3: $spacer,
4: ($spacer * 8),
5: ($spacer * 12),
6: ($spacer * 50)
);
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";
Primary color overwrite works fine but the spacers don't.
As is it now it seems like all the value are equal to 0, whenever I add a class like "mt-5" it doesn't change anything.
I don't know what I'm doing wrong.
Here's how to add spacers to the map. The issue is that the spacer has no units. Use px or rem to define the spacer unit...
$spacer: 1rem;
$spacers: (
0: 0,
1: ($spacer * .2),
2: ($spacer * 3),
3: $spacer,
4: ($spacer * 8),
5: ($spacer * 12),
6: ($spacer * 50)
);