rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-18 15:54:26 +01:00
Code Issues Actions Packages Releases Activity

docs: add info on modifying and adding utilities

Browse Source
This commit is contained in:
Luke-zhang-04 2020-07-19 21:08:41 +03:00 committed by XhmikosR
parent 3b985977c9
commit 5e270a13d1
1 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
site/content/docs/5.0/utilities/api.md
View File

@ -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%),
),
),
),
)
);
```