Add ability to use multiple classes in a single mixin call

diff --git a/scss/tests/utilities/_mixin.test.scss b/scss/tests/utilities/_mixin.test.scss
new file mode 100644 (file)
index 0000000..ea91da7
--- /dev/null
+++ b/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;
+        }
+      }
+    }
+  }
+}

diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 10508c4c6b40603faad14345cf13f012dc5c0a42..3b52e8235ef02a5a73924b9583fb91dd87bc9ba0 100644 (file)
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -51,24 +51,28 @@
 
 $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) {
+// 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.
+
+@mixin util($classes...) {
+  @each $class in $classes {
+    @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 {
-      @each $property in map-get($definition, properties) {
-        #{$property}: map-get($definition, value);
-      }
+      @debug "Unknown utility class " + $class;
     }
   }
-  @else {
-    @debug "Unknown utility class " + $class;
-  }
 }

diff --git a/site/content/docs/5.3/utilities/mixin.md b/site/content/docs/5.3/utilities/mixin.md
index 88b05fb9c0d0d01341e67839104f5a71ef5e7ce0..34a8fbfd4b210da5c38af5d46658dc598dc61fcf 100644 (file)
--- a/site/content/docs/5.3/utilities/mixin.md
+++ b/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(p-4);
-  @include util(mb-md-3);
+  @include util(d-inline-flex, p-4, mb-md-3);
   color: purple;
 }
 ```