公式ドキュメント

https://getbootstrap.jp/docs/5.0/utilities/api/#modify-utilities

Bootstrap の公式ドキュメントにも書いてあります。

拡張方法

// 必要な変数などをimport
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

// 変数を拡張
$utilities: map-merge(
  $utilities,
  (
    'width':
      map-merge(
        map-get($utilities, 'width'),
        (
          values:
            map-merge(
              map-get(map-get($utilities, 'width'), 'values'),
              (
                10: 10%,
                20: 20%,
                30: 30%,
                40: 40%,
                60: 60%,
                70: 70%,
                80: 80%,
                90: 90%,
              )
            ),
        )
      ),
  )
);

// 拡張した変数でスタイルを再生成
@import 'bootstrap/scss/utilities/api';

以上のように、既存の Bootstrap の変数に拡張したい値をマージして、スタイルを再生成することで実現できます。デフォルトの Bootstrap では

• w-25 ⇒ width: 25%
• w-50 ⇒ width: 50%
• w-75 ⇒ width: 75%
• w-100 ⇒ width: 100%
• w-auto ⇒ width: auto

しかサポートされていませんが、上のコードで拡張することでw-10やw-70なども指定可能になります。

最後に

Sass って結構勉強するのが難しいというか、腰が重いようなイメージがあります。自分もそうです。

では

Bye