diff --git a/scss/_variables.scss b/scss/_variables.scss index f6a37b764..4f323f160 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -348,6 +348,7 @@ $enable-rfs: true !default; $enable-validation-icons: true !default; $enable-negative-margins: false !default; $enable-deprecation-messages: true !default; +$enable-utility-classes: true !default; $enable-important-utilities: true !default; // Prefix for :root CSS variables diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index bedbf2a78..edca104af 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -66,4 +66,3 @@ $utilities: map-get-multiple( ); @import "utilities/api"; -@import "utilities/mixin"; diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss index f55475770..6d7968e68 100644 --- a/scss/bootstrap-utilities.scss +++ b/scss/bootstrap-utilities.scss @@ -17,4 +17,3 @@ // Utilities @import "utilities/api"; -@import "utilities/mixin"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index f84ef865f..6a5d13166 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -51,5 +51,4 @@ // Utilities @import "utilities/api"; -@import "utilities/mixin"; // scss-docs-end import-stack diff --git a/scss/functions/_utilities-map.scss b/scss/functions/_utilities-map.scss index 28c7380ce..95d3c3820 100644 --- a/scss/functions/_utilities-map.scss +++ b/scss/functions/_utilities-map.scss @@ -14,8 +14,8 @@ } $utilities-map: () !default; - @each $key, $utility in $utilities { + @each $key, $utility in $utilities { @if type-of($utility) == "map" { $properties: map-get($utility, property); // Some utilities set the value on more than one property. diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss index 62e1d398e..10508c4c6 100644 --- a/scss/utilities/_api.scss +++ b/scss/utilities/_api.scss @@ -1,47 +1,74 @@ -// Loop over each breakpoint -@each $breakpoint in map-keys($grid-breakpoints) { - - // Generate media query if needed - @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - // Loop over each utility property - @each $key, $utility in $utilities { - // The utility can be disabled with `false`, thus check if the utility is a map first - // Only proceed if responsive media queries are enabled or if it's the base media query - @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") { - @include generate-utility($utility, $infix); - } - } - } -} - -// RFS rescaling -@media (min-width: $rfs-mq-value) { +@if $enable-utility-classes { + // Loop over each breakpoint @each $breakpoint in map-keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + // Generate media query if needed + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { // Loop over each utility property @each $key, $utility in $utilities { // The utility can be disabled with `false`, thus check if the utility is a map first // Only proceed if responsive media queries are enabled or if it's the base media query - @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { - @include generate-utility($utility, $infix, true); + @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") { + @include generate-utility($utility, $infix); } } } } + + // RFS rescaling + @media (min-width: $rfs-mq-value) { + @each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { + // Loop over each utility property + @each $key, $utility in $utilities { + // The utility can be disabled with `false`, thus check if the utility is a map first + // Only proceed if responsive media queries are enabled or if it's the base media query + @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { + @include generate-utility($utility, $infix, true); + } + } + } + } + } + + + // Print utilities + @media print { + @each $key, $utility in $utilities { + // The utility can be disabled with `false`, thus check if the utility is a map first + // Then check if the utility needs print styles + @if type-of($utility) == "map" and map-get($utility, print) == true { + @include generate-utility($utility, "-print"); + } + } + } } +// Generate utility placeholders -// Print utilities -@media print { - @each $key, $utility in $utilities { - // The utility can be disabled with `false`, thus check if the utility is a map first - // Then check if the utility needs print styles - @if type-of($utility) == "map" and map-get($utility, print) == true { - @include generate-utility($utility, "-print"); +$utilities-map: build-utilities-map(); // stylelint-disable-line scss/dollar-variable-default + +@mixin util($class) { + @if map-has-key($utilities-map, $class) { + $definition: map-get($utilities-map, $class); + $breakpoint: map-get($definition, breakpoint); + @if $breakpoint != null { + @include media-breakpoint-up($breakpoint) { + @each $property in map-get($definition, properties) { + #{$property}: map-get($definition, value); + } + } + } + @else { + @each $property in map-get($definition, properties) { + #{$property}: map-get($definition, value); + } } } + @else { + @debug "Unknown utility class " + $class; + } } diff --git a/scss/utilities/_mixin.scss b/scss/utilities/_mixin.scss deleted file mode 100644 index 175affe7d..000000000 --- a/scss/utilities/_mixin.scss +++ /dev/null @@ -1,24 +0,0 @@ - -$utilities-map: build-utilities-map(); // stylelint-disable-line scss/dollar-variable-default - -@mixin utl($class) { - @if map-has-key($utilities-map, $class) { - $definition: map-get($utilities-map, $class); - $breakpoint: map-get($definition, breakpoint); - @if $breakpoint != null { - @include media-breakpoint-up($breakpoint) { - @each $property in map-get($definition, properties) { - #{$property}: map-get($definition, value); - } - } - } - @else { - @each $property in map-get($definition, properties) { - #{$property}: map-get($definition, value); - } - } - } - @else { - @debug "Unknown utility class " + $class; - } -} diff --git a/site/content/docs/5.1/customize/options.md b/site/content/docs/5.1/customize/options.md index 99aa258db..7b8518e69 100644 --- a/site/content/docs/5.1/customize/options.md +++ b/site/content/docs/5.1/customize/options.md @@ -26,6 +26,7 @@ You can find and customize these variables for key global options in Bootstrap's | `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. | | `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). | | `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. | +| `$enable-utility-classes` | `true` (default) or `false` | Enables the generation of utility classes. | | `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. | | `$enable-smooth-scroll` | `true` (default) or `false` | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}) | {{< /bs-table >}}