Utility API improvement: use $key/$value instead of nth (#28828)

Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>

2 files changed, 3 insertions, 4 deletions

diff --git a/scss/_functions.scss b/scss/_functions.scss
index 85470a947c..fc967962d3 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -53,7 +53,6 @@
   @return $map;
 }
 
-
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index fb0b2cf406..b5901a7dd7 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -8,7 +8,7 @@
     $values: zip($values, $values);
   }
 
-  @each $value in $values {
+  @each $key, $value in $values {
     $properties: map-get($utility, property);
 
     // Multiple properties are possible, for example with vertical or horizontal margins or paddings
@@ -21,12 +21,12 @@
     $property-class: if($property-class, $property-class, nth($properties, 1));
 
     // Don't prefix if value key is null (eg. with shadow class)
-    $property-class-modifier: if(nth($value, 1), "-" + nth($value, 1), "");
+    $property-class-modifier: if($key, "-" + $key, "");
 
     .#{$property-class + $infix + $property-class-modifier} {
       @each $property in $properties {
         // stylelint-disable-next-line declaration-no-important
-        #{$property}: #{nth($value, 2)} !important;
+        #{$property}: $value !important;
       }
     }
   }