1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00

Sass docs updates (#37897)

* Add maps

* Redesign scss-docs rendering

* Update other CSS sections

* Fix linter
This commit is contained in:
Mark Otto
2023-01-16 18:57:24 -08:00
committed by GitHub
parent eec5015520
commit 20ab8219a0
22 changed files with 133 additions and 46 deletions

View File

@@ -83,11 +83,11 @@ Or, choose from any of the `.bg-opacity` utilities:
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
{{< /example >}}
## Sass
## CSS
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
### Variables
### Sass variables
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
@@ -101,7 +101,13 @@ Grayscale colors are also available, but only a subset are used to generate any
{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}}
### Map
Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
{{< scss-docs name="theme-bg-subtle-variables" file="scss/_variables.scss" >}}
{{< scss-docs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" >}}
### Sass maps
Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
@@ -115,11 +121,17 @@ RGB colors are generated from a separate Sass map:
{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
And background color opacities build on that with their own map that's consumed by the utilities API:
Background color opacities build on that with their own map that's consumed by the utilities API:
{{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}}
### Mixins
Color mode background colors are also available as a Sass map:
{{< scss-docs name="theme-bg-subtle-map" file="scss/_maps.scss" >}}
{{< scss-docs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" >}}
### Sass mixins
**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
@@ -127,7 +139,7 @@ And background color opacities build on that with their own map that's consumed
{{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}}
### Utilities API
## Utilities API
Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})