Update utility mixin and wrap utility classes in `$enable-` variable

- Rearrange Sass files to simplify things
- Rename `utl()` to `util()`
- Add new `$enable-utility-classes` variable for disabling the default generation of our utilities (useful if you want to only use utilities via mixin)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index abd7a7305786ad9b18d5c51cc374156cb629e929..08266a053690463e14b002311ac575f8ef7eb0b0 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -382,6 +382,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;
 
 $enable-dark-mode:            true !default;

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 0f5ea5a05c5254014f309e0970bf6c86b2a0a6bd..52bd577e3ae57f75bf42c1c58cb210da9cd78203 100644 (file)
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -60,4 +60,3 @@ $utilities: map-get-multiple(
 );
 
 @import "utilities/api";
-@import "utilities/mixin";

diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss
index c3618a58e0b5d32c5c08d9eb55066e6f3c3b72a8..99c4a3595ca5744931f4f26f3166e391c6137921 100644 (file)
--- 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 a38a5c6c79cf7da62d2dc23c17f4d211f5d47335..449d704878fa210c85e09a2af91723eee9f14ad6 100644 (file)
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -49,5 +49,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 28c7380ce6375f43b36d4cb0ba121224b6210e12..95d3c3820a1b97c3e1f7846bd33e5154cc001cb5 100644 (file)
--- 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 62e1d398e3529d998c6ac989973a534477014f31..10508c4c6b40603faad14345cf13f012dc5c0a42 100644 (file)
--- 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
+
+$utilities-map: build-utilities-map(); // stylelint-disable-line scss/dollar-variable-default
 
-// 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");
+@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 (file)
index 175affe..0000000
--- 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.3/customize/options.md b/site/content/docs/5.3/customize/options.md
index b5c4fc39274668a3ae4873f97c27302c533f3406..b641d156556ba39af3253f04e59d326f9ea6da2e 100644 (file)
--- a/site/content/docs/5.3/customize/options.md
+++ b/site/content/docs/5.3/customize/options.md
@@ -27,6 +27,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 >}}