Add ability to use multiple classes in a single mixin call

scss/tests/utilities/_mixin.test.scss

@@ -0,0 +1,35 @@
+@import "../../functions";
+@import "../../variables";
+@import "../../variables-dark";
+@import "../../maps";
+@import "../../mixins";
+@import "../../utilities";
+@import "../../utilities/api";
+
+@include describe("utility mixin") {
+  @include it("generate property-value pairs for given utility") {
+
+    @include assert() {
+      @include output() {
+        .test {
+          @include util(d-block);
+          @include util(p-3);
+        }
+        .test2 {
+          @include util(d-block, p-3);
+        }
+      }
+
+      @include expect() {
+        .test {
+          display: block;
+          padding: 1rem;
+        }
+        .test2 {
+          display: block;
+          padding: 1rem;
+        }
+      }
+    }
+  }
+}

scss/utilities/_api.scss

@@ -51,24 +51,28 @@
 
 $utilities-map: build-utilities-map(); // stylelint-disable-line scss/dollar-variable-default
 
-@mixin util($class) {
+// Sometimes it’s useful for a mixin to be able to take any number of arguments. If the last argument in a @mixin declaration ends in ..., then all extra arguments to that mixin are passed to that argument as a list. This argument is known as an argument list.
-  @if map-has-key($utilities-map, $class) {
+
-    $definition: map-get($utilities-map, $class);
+@mixin util($classes...) {
-    $breakpoint: map-get($definition, breakpoint);
+  @each $class in $classes {
-    @if $breakpoint != null {
+    @if map-has-key($utilities-map, $class) {
-      @include media-breakpoint-up($breakpoint) {
+      $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 {
-      @each $property in map-get($definition, properties) {
+      @debug "Unknown utility class " + $class;
-        #{$property}: map-get($definition, value);
-      }
     }
   }
-  @else {
-    @debug "Unknown utility class " + $class;
-  }
 }

site/content/docs/5.3/utilities/mixin.md

@@ -22,9 +22,13 @@ Bootstrap generates hundreds of utilities to quickly and easily style elements t
 ```scss
 // Using the utility mixin in your custom Sass
 .test {
+  // Individual utilities
   @include util(d-inline-flex);
   @include util(p-4);
   @include util(mb-md-3);
+
+  // Multiple utilities
+  @include util(d-inline-flex, p-4, mb-md-3);
 }
 ```
 
@@ -94,6 +98,20 @@ While you can include responsive utilities individually, Sass will generate mult
 
 This way, you only output one media query in your compiled CSS and no further optimization or action is needed to clean up the output.
 
+## Multiple utilities
+
+Include multiple utilities in a single `util()` mixin call with a comma separated list. Once again, for multiple responsive utilities, use a media query to group them under a single compiled media query.
+
+```scss
+.test {
+  @include util(d-inline-flex, p-4, mb-3);
+  color: purple;
+
+  @include media-breakpoint-up(md) {
+    @include util(p-5, mb-5);
+  }
+}
+```
 
 ## Custom setup
 
@@ -114,9 +132,7 @@ Want to use only the utilities and mixin in your own project? In your project's
 
 // Write your own styles
 .test {
-  @include util(d-inline-flex);
+  @include util(d-inline-flex, p-4, mb-md-3);
-  @include util(p-4);
-  @include util(mb-md-3);
   color: purple;
 }
 ```