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

Question

如何在 sass 中更改 Bootstrap 5 fs-* 类？因为在 documentation只展示了如何修改h-*类，比如h5-font-size，而不是fs-*类。

Answer 1

您可以使用 Utilities API 修改“字体大小”实用程序.将新值与现有的 $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 Demo

---

相关:Add new utilities with Bootstrap 5