fix: add missing selectors part 2 (@W-12982157@) (#5197)

Author: nolanlawson

ui/utilities/sizing/_index.scss

@@ -15,19 +15,23 @@ $_sizes: (
   'xx-large': $size-xx-large
 );
 
+/// Column sizes
+/// @type array
+/// @private
+$_columnSizes: 1, 2, 3, 4, 5, 6, 7, 8, 12;
+
 // All SLDS size classes like `slds-size--medium` and `slds-size--medium-1-of-12` in one string.
 // This is faster for style calculation than `[class*="slds-size_"]`.
 /// @private
 @function all-sizes () {
   $prefixes: 'slds-size_', 'slds-size--';
-  $columnSizes: 1, 2, 3, 4, 5, 6, 7, 8, 12;
 
   $result: '';
   @each $prefix in $prefixes {
     @each $size in map-keys($_sizes) {
       $result: "#{$result}, .#{$prefix}#{$size}";
     }
-    @each $columnSize in $columnSizes {
+    @each $columnSize in $_columnSizes {
       @for $i from 1 through $columnSize {
         $result: "#{$result}, .#{$prefix}#{$i}-of-#{$columnSize}";
       }
@@ -37,18 +41,28 @@ $_sizes: (
   @return str-slice($result, 3); // Remove initial ", "
 }
 
-// All SLDS classes like `slds-small-size_medium` in one string.
+// All SLDS classes like `slds-small-size_medium` and `slds-small-size_1-of-12` in one string.
 // Note that the first size is only a breakpoint size, and the second is all possible sizes.
 // This is faster for style calculation than `[class*="slds-#{$breakpointSize}-size_"]`
 /// @private
-@function all-responsive-sizes ($breakpointSize, $prefix) {
+@function all-responsive-sizes ($breakpointSize, $prefix, $withColumnSizes) {
   $infixes: '-size_', '-size--';
 
   $result: '';
+
   @each $infix in $infixes {
+    // e.g. `slds-small-size_medium`
     @each $size in map-keys($_sizes) {
       $result: "#{$result}, .#{$prefix}#{$breakpointSize}#{$infix}#{$size}";
     }
+    // e.g. `slds-small-size_1_of_12`
+    @if ($withColumnSizes) {
+      @each $columnSize in $_columnSizes {
+        @for $i from 1 through $columnSize {
+          $result: "#{$result}, .#{$prefix}#{$breakpointSize}#{$infix}#{$i}-of-#{$columnSize}";
+        }
+      }
+    }
   }
   @return str-slice($result, 3); // Remove initial ", "
 }
@@ -101,7 +115,7 @@ $_sizes: (
   @media (min-width: #{pem($breakpoint)}) {
 
     // Fixes issue when sizing is used with slds-col
-    #{all-responsive-sizes($size, 'slds-')} {
+    #{all-responsive-sizes($size, 'slds-', true)} {
       flex: none;
     }
 
@@ -133,7 +147,7 @@ $_sizes: (
   @media (max-width: #{pem($breakpoint)}) {
 
     // Fixes issue when sizing is used with slds-col
-    #{all-responsive-sizes($size, 'slds-max-')} {
+    #{all-responsive-sizes($size, 'slds-max-', false)} {
       flex: none;
     }