4

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.

M.Pau
  • 137
  • 1
  • 3
  • 11
  • 1
    This post can help you: https://stackoverflow.com/questions/45776055/how-to-extend-modify-customize-bootstrap-4-with-sass – ReSedano Oct 23 '18 at 08:28
  • I did as it says but still not working, I added `@import "../node_modules/bootstrap/scss/functions";` `@import "../node_modules/bootstrap/scss/variables";` to the top but now even $primary overwrite doesn't work – M.Pau Oct 23 '18 at 09:14

1 Answers1

2

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)
);

https://www.codeply.com/go/TY8XqnvzO9

Zim
  • 329,487
  • 83
  • 671
  • 600