scss bootstrap 4覆盖图 [英] scss bootstrap 4 overwrite map

问题描述

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

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.

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

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.

推荐答案

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

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

这篇关于scss bootstrap 4覆盖图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！