sass - 如何使用其他尺寸扩展 Bootstrap 4.1 $spacers

Question

Bootstrap 4.1 documentation on spacing说我可以扩展 $spacers 变量(由边距和填充类使用)，但它没有解释如何。

任何人都可以分享官方文档的链接吗？如果那不存在，谁能解释一下？

Answer 1

你可以关注 Bootstrap 的 Variable defaults有关如何仅覆盖单个 Sass 变量的默认值的文档。您可以通过设置 $spacers 添加自己的在您的覆盖文件中:

// Your variable overrides
$spacer: 1rem;
$spacers: (
  6: ($spacer * 3.5),
  7: ($spacer * 10)
)

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

文档引用的变量称为 $spacers并且在 _variables.scss :

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

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