Question

我正在尝试使用Bootstrap 4进行scss操作，但是我不知道如何覆盖变量（使用映射）正确性

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

主要颜色覆盖效果很好，但间隔符却不能。

现在看来，所有值都等于0，每当我添加“ mt-5”之类的类时，它都不会改变。

我不知道我在做什么错。

Answer 1

以下是在地图上添加间隔符的方法。问题是spacer没有单位。使用px或rem定义spacer单位...

$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

scss bootstrap 4覆盖图

1 个答案: