Add Sass docs (variables, mixins, and loops) to most pages (#32747)

* WIP: Mention variables, mixins, and loops in docs

* Add Sass sections to component pages

* add sass docs for forms and content

* Update buttons.md

* Remove empty mixins sections

* Massive update to utilities and some consistency changes

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

44 files changed, 468 insertions, 16 deletions

diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.0/components/accordion.md
index 298b0697a0..923d5a98bd 100644
--- a/site/content/docs/5.0/components/accordion.md
+++ b/site/content/docs/5.0/components/accordion.md
@@ -104,3 +104,9 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a
 ## Accessibility
 
 Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information.
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md
index f35a044ae5..3ef2e62cf8 100644
--- a/site/content/docs/5.0/components/alerts.md
+++ b/site/content/docs/5.0/components/alerts.md
@@ -71,6 +71,24 @@ You can see this in action with a live demo:
 When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
 {{< /callout >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
+
+### Variant mixin
+
+Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
+
+{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
+
+### Loop
+
+Loop that generates the modifier classes with the `alert-variant()` mixin.
+
+{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
+
 ## JavaScript behavior
 
 ### Triggers
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index 44c85d7179..50571d8856 100644
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.0/components/badge.md
@@ -63,3 +63,9 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 <span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/breadcrumb.md b/site/content/docs/5.0/components/breadcrumb.md
index 3395fbf67d..9143e76127 100644
--- a/site/content/docs/5.0/components/breadcrumb.md
+++ b/site/content/docs/5.0/components/breadcrumb.md
@@ -88,3 +88,9 @@ $breadcrumb-divider: none;
 Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
 
 For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md
index b53263a886..063bae1c41 100644
--- a/site/content/docs/5.0/components/buttons.md
+++ b/site/content/docs/5.0/components/buttons.md
@@ -205,3 +205,25 @@ buttons.forEach(function (button) {
   button.toggle()
 })
 ```
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="btn-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
+
+{{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}}
+
+{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}}
+
+{{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
+
+### Loops
+
+Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
+
+{{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}}
diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md
index 2db1a1f40d..48f54f0c2f 100644
--- a/site/content/docs/5.0/components/card.md
+++ b/site/content/docs/5.0/components/card.md
@@ -721,3 +721,9 @@ Just like with card groups, card footers will automatically line up.
 ### Masonry
 
 In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="card-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md
index 689e7a6aa2..a73ebb090a 100644
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.0/components/carousel.md
@@ -279,6 +279,16 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
 </div>
 {{< /example >}}
 
+## Custom transition
+
+The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}}
+
 ## Usage
 
 ### Via data attributes
@@ -446,7 +456,3 @@ myCarousel.addEventListener('slide.bs.carousel', function () {
   // do something...
 })
 ```
-
-### Change transition duration
-
-The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md
index a6bb3f4c06..f4a3ed071e 100644
--- a/site/content/docs/5.0/components/close-button.md
+++ b/site/content/docs/5.0/components/close-button.md
@@ -30,3 +30,9 @@ Change the default `.btn-close` to be white with the `.btn-close-white` class. T
 <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
 <button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md
index 8546aaeb50..fe26918c1f 100644
--- a/site/content/docs/5.0/components/collapse.md
+++ b/site/content/docs/5.0/components/collapse.md
@@ -77,6 +77,18 @@ If your control element is targeting a single collapsible element – i.e. the `
 
 Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}}
+
+### Classes
+
+Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion).
+
+{{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}}
+
 ## Usage
 
 The collapse plugin utilizes a few classes to handle the heavy lifting:
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 24353f0f4d..d74eec765d 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -903,6 +903,28 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
 </div>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+Variables for all dropdowns:
+
+{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
+
+Variables for the [dark dropdown](#dark-dropdowns):
+
+{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}}
+
+Variables for the CSS-based carets that indicate a dropdown's interactivity:
+
+{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.
+
+{{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}}
+
 ## Usage
 
 Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md
index 5213ef5ca7..1ac5a9a2b9 100644
--- a/site/content/docs/5.0/components/list-group.md
+++ b/site/content/docs/5.0/components/list-group.md
@@ -254,6 +254,23 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
 </div>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
+
+{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
+
+### Loop
+
+Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
+
+{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
 
 ## JavaScript behavior
 
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index 52493d4e8a..0abe0ce0f2 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -793,6 +793,18 @@ Another override is the option to pop up a modal that covers the user viewport,
   </div>
 </div>
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
+
+### Loop
+
+[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
+
+{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}}
+
 ## Usage
 
 The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md
index b9b00c3bb1..34d43a29a7 100644
--- a/site/content/docs/5.0/components/navbar.md
+++ b/site/content/docs/5.0/components/navbar.md
@@ -646,3 +646,17 @@ Sometimes you want to use the collapse plugin to trigger a container element for
 {{< /example >}}
 
 When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
+
+### Loop
+
+[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
+
+{{< scss-docs name="navbar-expand-loop" file="scss/_navbar.scss" >}}
diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md
index 822aec14c4..ee97d85a48 100644
--- a/site/content/docs/5.0/components/navs-tabs.md
+++ b/site/content/docs/5.0/components/navs-tabs.md
@@ -304,6 +304,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 </ul>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
+
 ## JavaScript behavior
 
 Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
diff --git a/site/content/docs/5.0/components/pagination.md b/site/content/docs/5.0/components/pagination.md
index 23b474589d..6b7c7a3da1 100644
--- a/site/content/docs/5.0/components/pagination.md
+++ b/site/content/docs/5.0/components/pagination.md
@@ -155,3 +155,13 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
   </ul>
 </nav>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+{{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index 8a2efa0a2a..9506fa8f7d 100644
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.0/components/popovers.md
@@ -109,6 +109,12 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus
 </span>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}
+
 ## Usage
 
 Enable popovers via JavaScript:
diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.0/components/progress.md
index 92834bebf3..1b59dc97ad 100644
--- a/site/content/docs/5.0/components/progress.md
+++ b/site/content/docs/5.0/components/progress.md
@@ -137,3 +137,15 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
   <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
 </div>
 ```
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
+
+### Keyframes
+
+Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`.
+
+{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md
index d2495b4206..37908f5b6b 100644
--- a/site/content/docs/5.0/components/spinners.md
+++ b/site/content/docs/5.0/components/spinners.md
@@ -171,6 +171,20 @@ Use spinners within buttons to indicate an action is currently processing or tak
 </button>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="spinner-variables" file="scss/_variables.scss" >}}
+
+### Keyframes
+
+Used for creating the CSS animations for our spinners. Included in `scss/_spinners.scss`.
+
+{{< scss-docs name="spinner-border-keyframes" file="scss/_spinners.scss" >}}
+
+{{< scss-docs name="spinner-grow-keyframes" file="scss/_spinners.scss" >}}
+
 
 [color]:   {{< docsref "/utilities/colors" >}}
 [display]: {{< docsref "/utilities/display" >}}
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 5f7a59db6e..20aefb249f 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -304,9 +304,13 @@ When using `autohide: false`, you must add a close button to allow users to dism
 </div>
 {{< /example >}}
 
-## JavaScript behavior
+## Sass
 
-### Usage
+### Variables
+
+{{< scss-docs name="toast-variables" file="scss/_variables.scss" >}}
+
+## Usage
 
 Initialize toasts via JavaScript:
 
diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md
index ee6d06e9e9..6c3577f3cc 100644
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/site/content/docs/5.0/components/tooltips.md
@@ -96,6 +96,12 @@ With an SVG:
   </a>
 </div>
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
+
 ## Usage
 
 The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
diff --git a/site/content/docs/5.0/content/figures.md b/site/content/docs/5.0/content/figures.md
index f5956614fe..29a38d7237 100644
--- a/site/content/docs/5.0/content/figures.md
+++ b/site/content/docs/5.0/content/figures.md
@@ -3,6 +3,7 @@ layout: docs
 title: Figures
 description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
 group: content
+toc: true
 ---
 
 Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`.
@@ -24,3 +25,9 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
   <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
 </figure>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/content/images.md b/site/content/docs/5.0/content/images.md
index 271b08e30d..f1012efbf5 100644
--- a/site/content/docs/5.0/content/images.md
+++ b/site/content/docs/5.0/content/images.md
@@ -53,3 +53,11 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
   <img src="..." class="img-fluid img-thumbnail" alt="...">
 </picture>
 ```
+
+## Sass
+
+### Variables
+
+Variables are available for image thumbnails.
+
+{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md
index dde90b997a..3681e186ac 100644
--- a/site/content/docs/5.0/content/tables.md
+++ b/site/content/docs/5.0/content/tables.md
@@ -775,9 +775,17 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{< /tables.inline >}}
 {{< /highlight >}}
 
-## Customizing in Sass
+## Sass
 
-- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants.
-- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable.
+### Variables
 
 {{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
+
+### Loop
+
+{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
+
+### Customizing
+
+- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants.
+- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable.
diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md
index cf9c836368..7d41f04dee 100644
--- a/site/content/docs/5.0/content/typography.md
+++ b/site/content/docs/5.0/content/typography.md
@@ -302,3 +302,19 @@ Align terms and descriptions horizontally by using our grid system's predefined
 ## Responsive font sizes
 
 In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
+
+## Sass
+
+### Variables
+
+Headings have some dedicated variables for sizing and spacing.
+
+{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}}
+
+Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables.
+
+{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md
index ae89f5ee34..7fefb6aa62 100644
--- a/site/content/docs/5.0/forms/checks-radios.md
+++ b/site/content/docs/5.0/forms/checks-radios.md
@@ -269,3 +269,9 @@ Different variants of `.btn`, such at the various outlined styles, are supported
 <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
 <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md
index 2012a4e824..9410550898 100644
--- a/site/content/docs/5.0/forms/floating-labels.md
+++ b/site/content/docs/5.0/forms/floating-labels.md
@@ -100,3 +100,9 @@ When working with the Bootstrap grid system, be sure to place form elements with
   </div>
 </div>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md
index e35f099674..41fd759d76 100644
--- a/site/content/docs/5.0/forms/form-control.md
+++ b/site/content/docs/5.0/forms/form-control.md
@@ -130,3 +130,17 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
   <option value="Chicago">
 </datalist>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}
+
+`$form-label-*` and `$form-text-*` are for our `<label>`s and `.form-text` component.
+
+{{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 19ffcbcfd4..00e9eeec9a 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -308,3 +308,9 @@ Input groups include support for custom selects and custom file inputs. Browser
   <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md
index dcd8e8ccd7..40e9b6b4f1 100644
--- a/site/content/docs/5.0/forms/overview.md
+++ b/site/content/docs/5.0/forms/overview.md
@@ -142,3 +142,13 @@ For situations where it's not possible to include a visible `<label>` or appropr
 If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
 
 While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
+
+## Sass
+
+Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$btn-input-*` and `$input-*` variables.
+
+### Variables
+
+`$btn-input-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.
+
+{{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/range.md b/site/content/docs/5.0/forms/range.md
index 7e95e0edff..302d6ce687 100644
--- a/site/content/docs/5.0/forms/range.md
+++ b/site/content/docs/5.0/forms/range.md
@@ -41,3 +41,9 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <label for="customRange3" class="form-label">Example range</label>
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/select.md b/site/content/docs/5.0/forms/select.md
index e2b0bd6a81..7f0c255efb 100644
--- a/site/content/docs/5.0/forms/select.md
+++ b/site/content/docs/5.0/forms/select.md
@@ -73,3 +73,9 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
   <option value="3">Three</option>
 </select>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 3f45143d76..128f6b4080 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -349,18 +349,34 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 </form>
 {{< /example >}}
 
-## Customizing
+## Sass
 
-Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
+### Variables
+
+{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
+
+{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
 
-Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
+### Map
 
-This is the Sass map from `_variables.scss`. Override this and recompile your Sass to generate different states:
+This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
 
 {{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
 
 Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
 
-This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
+### Loop
+
+Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
 
 {{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
+
+### Customizing
+
+Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
+
+Please note that **we do not recommend customizing `$form-validation-states` values without also modifying the `form-validation-state` mixin**.
diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md
index 459ca4e72d..14f7005291 100644
--- a/site/content/docs/5.0/utilities/borders.md
+++ b/site/content/docs/5.0/utilities/borders.md
@@ -77,3 +77,23 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 {{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
 {{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
+
+### Utilities
+
+Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}}
+
+{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md
index 0d773272d7..2e22ed988f 100644
--- a/site/content/docs/5.0/utilities/flex.md
+++ b/site/content/docs/5.0/utilities/flex.md
@@ -627,3 +627,11 @@ Responsive variations also exist for `align-content`.
 {{- end -}}
 {{< /flex.inline >}}
 {{< /markdown >}}
+
+## Sass
+
+### Utilities API
+
+Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-flex" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/float.md b/site/content/docs/5.0/utilities/float.md
index 4d27c00d2b..a18c21471c 100644
--- a/site/content/docs/5.0/utilities/float.md
+++ b/site/content/docs/5.0/utilities/float.md
@@ -38,3 +38,11 @@ Here are all the support classes:
 {{- end -}}
 {{< /float.inline >}}
 {{< /markdown >}}
+
+## Sass
+
+### Utilities API
+
+Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-float" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/interactions.md b/site/content/docs/5.0/utilities/interactions.md
index fdb6e1a480..b95b98a103 100644
--- a/site/content/docs/5.0/utilities/interactions.md
+++ b/site/content/docs/5.0/utilities/interactions.md
@@ -29,3 +29,11 @@ Bootstrap provides `.pe-none` and `.pe-auto` classes to prevent or add element i
 {{< callout warning >}}
 The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as `tabindex="-1"` (to prevent them from receiving keyboard focus) and `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the `disabled` HTML attribute instead.
 {{< /callout >}}
+
+## Sass
+
+### Utilities API
+
+Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-interaction" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/overflow.md b/site/content/docs/5.0/utilities/overflow.md
index f05df6800a..a36374cd55 100644
--- a/site/content/docs/5.0/utilities/overflow.md
+++ b/site/content/docs/5.0/utilities/overflow.md
@@ -30,3 +30,11 @@ Adjust the `overflow` property on the fly with four default values and classes.
 ```
 
 Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
+
+## Sass
+
+### Utilities API
+
+Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md
index 63ce589b3d..bc57eb028a 100644
--- a/site/content/docs/5.0/utilities/position.md
+++ b/site/content/docs/5.0/utilities/position.md
@@ -115,3 +115,16 @@ You can use these classes with existing components to create new ones. Remember
 </div>
 {{< /example >}}
 
+## Sass
+
+### Maps
+
+Default position utility values are declared in a Sass map, then used to generate our utilities.
+
+{{< scss-docs name="position-map" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-position" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/shadows.md b/site/content/docs/5.0/utilities/shadows.md
index c1a1556898..bb5ef44abb 100644
--- a/site/content/docs/5.0/utilities/shadows.md
+++ b/site/content/docs/5.0/utilities/shadows.md
@@ -3,6 +3,7 @@ layout: docs
 title: Shadows
 description: Add or remove shadows to elements with box-shadow utilities.
 group: utilities
+toc: true
 ---
 
 ## Examples
@@ -15,3 +16,15 @@ While shadows on components are disabled by default in Bootstrap and can be enab
 <div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
 <div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-shadow" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/sizing.md b/site/content/docs/5.0/utilities/sizing.md
index 3a12caa2dd..962575ffe3 100644
--- a/site/content/docs/5.0/utilities/sizing.md
+++ b/site/content/docs/5.0/utilities/sizing.md
@@ -50,3 +50,11 @@ You can also use utilities to set the width and height relative to the viewport.
 <div class="vw-100">Width 100vw</div>
 <div class="vh-100">Height 100vh</div>
 ```
+
+## Sass
+
+### Utilities API
+
+Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/spacing.md b/site/content/docs/5.0/utilities/spacing.md
index 2fec4e1cf2..a38c2659fd 100644
--- a/site/content/docs/5.0/utilities/spacing.md
+++ b/site/content/docs/5.0/utilities/spacing.md
@@ -109,3 +109,17 @@ When using `display: grid`, you can make use of `gap` utilities on the parent gr
 {{< /example >}}
 
 Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
+
+## Sass
+
+### Maps
+
+Spacing utilities are declared via Sass map and then generated with our utilities API.
+
+{{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-spacing" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/text.md b/site/content/docs/5.0/utilities/text.md
index d76cad15fe..41c92958cb 100644
--- a/site/content/docs/5.0/utilities/text.md
+++ b/site/content/docs/5.0/utilities/text.md
@@ -82,8 +82,6 @@ Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`â€
 
 Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
 
-{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
-
 ## Font weight and italics
 
 Quickly change the `font-weight` or `font-style` of text with these utilities. `font-style` utilities are abbreviated as `.fst-*` and `font-weight` utilities are abbreviated as `.fw-*`.
@@ -136,3 +134,21 @@ Decorate text in components with text decoration classes.
 <p class="text-decoration-line-through">This text has a line going through it.</p>
 <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
+
+### Maps
+
+Font-size utilities are generated from this map, in combination with our utilities API.
+
+{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-text" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/vertical-align.md b/site/content/docs/5.0/utilities/vertical-align.md
index f7cf2207be..9fe0eeb932 100644
--- a/site/content/docs/5.0/utilities/vertical-align.md
+++ b/site/content/docs/5.0/utilities/vertical-align.md
@@ -38,3 +38,11 @@ With table cells:
   </tbody>
 </table>
 {{< /example >}}
+
+## Sass
+
+### Utilities API
+
+Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-vertical-align" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/visibility.md b/site/content/docs/5.0/utilities/visibility.md
index 349685bd6b..61eb302418 100644
--- a/site/content/docs/5.0/utilities/visibility.md
+++ b/site/content/docs/5.0/utilities/visibility.md
@@ -27,3 +27,11 @@ Apply `.visible` or `.invisible` as needed.
   visibility: hidden !important;
 }
 ```
+
+## Sass
+
+### Utilities API
+
+Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-visibility" file="scss/_utilities.scss" >}}