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)

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;

scss/bootstrap-grid.scss

@@ -60,4 +60,3 @@ $utilities: map-get-multiple(
 );
 
 @import "utilities/api";
-@import "utilities/mixin";

scss/bootstrap-utilities.scss

@@ -17,4 +17,3 @@
 
 // Utilities
 @import "utilities/api";
-@import "utilities/mixin";

scss/bootstrap.scss

@@ -49,5 +49,4 @@
 
 // Utilities
 @import "utilities/api";
-@import "utilities/mixin";
 // scss-docs-end import-stack

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.

scss/utilities/_api.scss

@@ -1,6 +1,6 @@
+@if $enable-utility-classes {
   // 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);
@@ -45,3 +45,30 @@
       }
     }
   }
+}
+
+// Generate utility placeholders
+
+$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;
+  }
+}

scss/utilities/_mixin.scss

@@ -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;
-  }
-}

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 >}}