twitter-bootstrap - 您如何在 Bootstrap 4.5 中使用 $spacer 变量？

Question

这是 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) ...所有抛出​​错误:(

Answer 1

使用map-get .例如:

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

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