From dfe1b156d1f5174ea005970e47fbf6eb66fba2f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jan 2021 12:11:56 -0800 Subject: [PATCH] Fixes #32557: Add functions and variables to the utilities API docs imports (#32684) Co-authored-by: XhmikosR --- site/content/docs/5.0/utilities/api.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md index 135097f143..7cd002faf4 100644 --- a/site/content/docs/5.0/utilities/api.md +++ b/site/content/docs/5.0/utilities/api.md @@ -244,9 +244,11 @@ Now that you're familiar with how the utilities API works, learn how to add your ### Add utilities -New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our `_utilities.scss` is imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values. +New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge( @@ -267,6 +269,8 @@ $utilities: map-merge( Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge( @@ -290,6 +294,8 @@ $utilities: map-merge( Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within. ```scss +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; $utilities: map-merge(