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:
@@ -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" >}})
|
||||
|
||||
|
Reference in New Issue
Block a user