如何为 SASS 变量中的 fs-* 类自定义 Bootstrap 5 字体大小 [英] How to Customize Bootstrap 5 Font Size for fs-* class in SASS variables

问题描述

如何更改 sass 中的 Bootstrap 5 fs-* 类?因为在 documentation 中只展示了如何修改 h-* 类，例如 h5-font-size，但不是 fs-* 类.

how to change Bootstrap 5 fs-* class in sass? because In the documentation only shows how to modify h-* class such as h5-font-size, but not the fs-* class.

推荐答案

您将修改font-size"实用程序使用 实用程序 API.将新值与现有的 $font-sizes 映射合并...

You would modify the "font-size" utility using the Utilities API. Merge the new values with the existing $font-sizes map...

@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 添加新实用程序

这篇关于如何为 SASS 变量中的 fs-* 类自定义 Bootstrap 5 字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！