From: Mark Otto <markdotto@gmail.com>
Date: Sat, 25 Mar 2023 03:43:46 +0000 (-0500)
Subject: Add ability to use multiple classes in a single mixin call
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b6e4cf45de48927b7560499a02be7b42bada554f;p=thirdparty%2Fbootstrap.git

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
index 0000000000..ea91da7ed6
--- /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 10508c4c6b..3b52e8235e 100644
--- 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 88b05fb9c0..34a8fbfd4b 100644
--- 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;
 }
 ```