您如何在 Bootstrap 4.5 中使用 $spacer 变量？答案

【问题标题】：How do you use the $spacer variables in Bootstrap 4.5?您如何在 Bootstrap 4.5 中使用 $spacer 变量？
【发布时间】：2020-10-16 07:09:14
【问题描述】：

这是 Bootstrap 的 _variables.scss 文件中 $spacers 的代码：

$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);

酷，这一切看起来都很有用。但是我如何在 scss 中实际使用这些？我试过$spacer-4，$spacer(4)，$spacers(4)...所有抛出错误:(

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 sass

【解决方案1】：

使用map-get。例如：

.foo {
    padding: map-get($spacers,4)
}

演示：https://codeply.com/p/wbVojGXN6a

【讨论】：