diff options
author | Luke-zhang-04 <luke.zhang2004dev@gmail.com> | 2020-07-19 21:08:41 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-11-05 08:50:09 +0300 |
commit | 5e270a13d1b35a81925a1067c89b082708c713ef (patch) | |
tree | 0009cbd8cc5bd2eddb26f498c84bcae95f762531 | |
parent | 3b985977c9c865674c00b8300d11ea9749c83a7f (diff) |
docs: add info on modifying and adding utilities
-rw-r--r-- | site/content/docs/5.0/utilities/api.md | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md index 7dd0d6ede5..aee021b4fb 100644 --- a/site/content/docs/5.0/utilities/api.md +++ b/site/content/docs/5.0/utilities/api.md @@ -212,3 +212,45 @@ $utilities: ( "float": null, ); ``` + +## Adding to existing utilities + +Add new utilities with `map-merge`.Start by importing the utilities stylesheet, then use `map-merge` to add new properties and values.s + +```scss +@import "bootstrap/scss/utilities"; + +$utilities: map-merge( + $utilities, + ( + "font-size": ( + responsive: true, + property: font-weight, + values: $display-font-sizes, + ) + ) +); +``` + +## Modifying existing utilities + +Modify existing utilities with `map-get` and `map-merge`. Once again, be sure to import the utilities stylesheet before your custom utilities. + +```scss +@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%), + ), + ), + ), + ) +); +``` |