如何为 SASS 变量中的 fs-* 类自定义 Bootstrap 5 字体大小

Question

如何更改sassfs-*中的 Bootstrap 5 类？因为文档中只展示了如何修改 类，例如，但没有展示类。h-*h5-font-sizefs-*

Answer 1

您可以使用Utilities API修改“font-size”实用程序。将新值与现有的 $font-sizes 映射合并...

@import "functions";
@import "variables";
@import "utilities";

$font-sizes: (
  1: 12rem,
  2: 10rem,
  3: 7rem,
  4: 5rem,
  5: 3rem,
  6: 2rem,
);

$utilities: map-merge(
  $utilities,
  (
    "font-size": map-merge(
      map-get($utilities, "font-size"),
      (
        values: $font-sizes,
      ),
    ),
  )
);

@import "bootstrap";

SASS演示

相关：使用 Bootstrap 5 添加新实用程序