Layout gap value list support

_index.scss

@@ -1,7 +1,8 @@
-@forward './src/fxlayout' show class-selectors,
+@forward "./src/fxlayout" show class-selectors,
 	gap-class-selectors,
+	gap-class-selectors-from-list,
 	attribute-selectors,
-	gap-attribute-selectors;
+	gap-attribute-selectors,
+	gap-attribute-selectors-from-list;
 
-@forward "./src/lib/mixins" hide layout-gap-attributes,
-	layout-gap-classes;
+@forward "./src/lib/mixins";

src/fxlayout.scss

@@ -4,9 +4,10 @@
 @use "lib/layout-classes" as layoutC;
 @use "lib/layout-align-attributes" as layoutAlignA;
 @use "lib/layout-align-classes" as layoutAlignC;
+@use "lib/layout-gap-attributes" as layoutGapA;
+@use "lib/layout-gap-classes" as layoutGapC;
 @use "lib/flex-attributes" as flexA;
 @use "lib/flex-classes" as flexC;
-@use "lib/mixins" as mix;
 
 /// Adds the css-fx-layout class selectors, e.g. `.fx-layout-row`
 ///
@@ -36,7 +37,19 @@
 /// @param {bool} $includeSelectorsForMediaSizes [false]
 ///	  Will generate additional selectors for flex layout media sizes
 @mixin gap-class-selectors($from: 1, $to: 24, $gapUnits: px em rem, $includeSelectorsForMediaSizes: false) {
-	@include mix.layout-gap-classes($from, $to, $gapUnits, $includeSelectorsForMediaSizes)
+	@include layoutGapC.layout-gap-classes($from, $to, $gapUnits, $includeSelectorsForMediaSizes)
+}
+
+/// Includes selectors for classes based on a list of values which can be used to add a gap to elements in a flex container
+///
+/// @param {number} $values
+///  Will generate selectors for every value in $values list
+/// @param {string} $gapUnits
+///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
+/// @param {bool} $includeSelectorsForMediaSizes
+///	  Will generate additional selectors for flex layout media sizes
+@mixin gap-class-selectors-from-list($values: 4 8 16, $gapUnits: px em rem, $includeSelectorsForMediaSizes: false) {
+	@include layoutGapC.layout-gap-classes-from-list($values, $gapUnits, $includeSelectorsForMediaSizes)
 }
 
 /// Adds the css-fx-layout attribute selectors, e.g. `data-layout="row"`
@@ -67,5 +80,17 @@
 /// @param {bool} $includeSelectorsForMediaSizes [false]
 ///	  Will generate additional selectors for flex layout media sizes
 @mixin gap-attribute-selectors($from: 1, $to: 24, $gapUnits: px em rem, $includeSelectorsForMediaSizes: false) {
-	@include mix.layout-gap-attributes($from, $to, $gapUnits, $includeSelectorsForMediaSizes)
+	@include layoutGapA.layout-gap-attributes($from, $to, $gapUnits, $includeSelectorsForMediaSizes)
 }
+
+/// Includes selectors for attributes based on a list of values which can be used to add a gap to elements in a flex container
+///
+/// @param {number} $values
+///  Will generate selectors for every value in $values list
+/// @param {string} $gapUnits
+///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
+/// @param {bool} $includeSelectorsForMediaSizes
+///	  Will generate additional selectors for flex layout media sizes
+@mixin gap-attribute-selectors-from-list($values: 4 8 16, $gapUnits: px em rem, $includeSelectorsForMediaSizes: false) {
+	@include layoutGapA.layout-gap-attributes-from-list($values, $gapUnits, $includeSelectorsForMediaSizes)
+}

src/lib/layout-gap-attributes.scss

@@ -0,0 +1,67 @@
+@use "sass:list";
+
+@import "mixins";
+
+/// Includes selectors for attributes which can be used to add a specific gap to elements in a flex container
+///
+/// @param {number} $value
+///   Will start generating selectors for $value $gapUnits
+/// @param {string} $gapUnits
+///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
+/// @param {string} $name
+///   Will generate selectors for a specific media size, e.g. xs, sm, md, ...
+@mixin layout-gap-attribute($value, $gapUnits, $name: false) {
+	@each $unit in $gapUnits {
+		*[data-layout-gap#{if($name, '-' + $name, '')}="#{$value}#{$unit}"] {
+			gap: #{$value}#{$unit};
+		}
+	}
+}
+
+/// Includes selectors for attributes which can be used to add a gap to elements in a flex container
+///
+/// @param {number} $from
+///   Will start generating selectors from $from $gapUnits
+/// @param {number} $to
+///   Will generate selectors until including $to $gapUnits
+/// @param {string} $gapUnits
+///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
+/// @param {bool} $includeSelectorsForMediaSizes
+///	  Will generate additional selectors for flex layout media sizes
+@mixin layout-gap-attributes($from: 1, $to: 24, $gapUnits: px em rem, $includeSelectorsForMediaSizes: true) {
+	@for $i from $from through $to {
+		@include layout-gap-attribute($i, $gapUnits)
+	}
+	@if $includeSelectorsForMediaSizes {
+		@each $name, $_ in $flex-layout-media-queries {
+			@include flex-layout-media($name) {
+				@for $i from $from through $to {
+					@include layout-gap-attribute($i, $gapUnits, $name)
+				}
+			}
+		}
+	}
+}
+
+/// Includes selectors for attributes based on a list of values which can be used to add a gap to elements in a flex container
+///
+/// @param {number} $values
+///  Will generate selectors for every value in $values list
+/// @param {string} $gapUnits
+///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
+/// @param {bool} $includeSelectorsForMediaSizes
+///	  Will generate additional selectors for flex layout media sizes
+@mixin layout-gap-attributes-from-list($values: 4 8 16, $gapUnits: px em rem, $includeSelectorsForMediaSizes: true) {
+	@each $value in $values {
+		@include layout-gap-attribute($value, $gapUnits)
+	}
+	@if $includeSelectorsForMediaSizes {
+		@each $name, $_ in $flex-layout-media-queries {
+			@include flex-layout-media($name) {
+				@each $value in $values {
+					@include layout-gap-attribute($value, $gapUnits, $name)
+				}
+			}
+		}
+	}
+}

src/lib/layout-gap-classes.scss

@@ -0,0 +1,67 @@
+@use "sass:list";
+
+@import "mixins";
+
+/// Includes selectors for classes which can be used to add a specific gap to elements in a flex container
+///
+/// @param {number} $value
+///   Will start generating selectors for $value $gapUnits
+/// @param {string} $gapUnits
+///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
+/// @param {string} $name
+///   Will generate selectors for a specific media size, e.g. xs, sm, md, ...
+@mixin layout-gap-class($value, $gapUnits, $name: false) {
+	@each $unit in $gapUnits {
+		*.fx-gap--#{$value}#{$unit}#{if($name, '--' + $name, '')} {
+			gap: #{$value}#{$unit};
+		}
+	}
+};
+
+/// Includes selectors for classes which can be used to add a gap to elements in a flex container
+///
+/// @param {number} $from
+///   Will start generating selectors from $from $gapUnits
+/// @param {number} $to
+///   Will generate selectors until including $to $gapUnits
+/// @param {string} $gapUnits
+///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
+/// @param {bool} $includeSelectorsForMediaSizes
+///	  Will generate additional selectors for flex layout media sizes
+@mixin layout-gap-classes($from: 1, $to: 24, $gapUnits: px em rem, $includeSelectorsForMediaSizes: true) {
+	@for $i from $from through $to {
+		@include layout-gap-class($i, $gapUnits)
+	}
+	@if $includeSelectorsForMediaSizes {
+		@each $name, $_ in $flex-layout-media-queries {
+			@include flex-layout-media($name) {
+				@for $i from $from through $to {
+					@include layout-gap-class($i, $gapUnits, $name)
+				}
+			}
+		}
+	}
+}
+
+/// Includes selectors for classes based on a list of values which can be used to add a gap to elements in a flex container
+///
+/// @param {number} $values
+///  Will generate selectors for every value in $values list
+/// @param {string} $gapUnits
+///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
+/// @param {bool} $includeSelectorsForMediaSizes
+///	  Will generate additional selectors for flex layout media sizes
+@mixin layout-gap-classes-from-list($values: 4 8 16, $gapUnits: px em rem, $includeSelectorsForMediaSizes: true) {
+	@each $value in $values {
+		@include layout-gap-class($value, $gapUnits)
+	}
+	@if $includeSelectorsForMediaSizes {
+		@each $name, $_ in $flex-layout-media-queries {
+			@include flex-layout-media($name) {
+				@each $value in $values {
+					@include layout-gap-class($value, $gapUnits, $name)
+				}
+			}
+		}
+	}
+}

src/lib/mixins.scss

@@ -186,70 +186,3 @@ $flex-layout-media-queries: (
 	}
 }
 
-// Gap
-
-/// Includes selectors for classes which can be used to add a gap to elements in a flex container
-///
-/// @param {number} $from
-///   Will start generating selectors from $from $gapUnits
-/// @param {number} $to
-///   Will generate selectors until including $to $gapUnits
-/// @param {string} $gapUnits
-///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
-/// @param {bool} $includeSelectorsForMediaSizes
-///	  Will generate additional selectors for flex layout media sizes
-@mixin layout-gap-classes($from: 1, $to: 24, $gapUnits: px em rem, $includeSelectorsForMediaSizes: true) {
-	@for $i from $from through $to {
-		@each $unit in $gapUnits {
-			*.fx-gap--#{$i}#{$unit} {
-				gap: #{$i}#{$unit};
-			}
-		}
-	}
-	@if $includeSelectorsForMediaSizes {
-		@each $name, $_ in $flex-layout-media-queries {
-			@include flex-layout-media($name) {
-				@for $i from $from through $to {
-					@each $unit in $gapUnits {
-						*.fx-gap--#{$i}#{$unit}--#{$name} {
-							gap: #{$i}#{$unit};
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-/// Includes selectors for attributes which can be used to add a gap to elements in a flex container
-///
-/// @param {number} $from
-///   Will start generating selectors from $from $gapUnits
-/// @param {number} $to
-///   Will generate selectors until including $to $gapUnits
-/// @param {string} $gapUnits
-///   Will generate selectors for the units passed in $gapUnits, e.g. px em rem
-/// @param {bool} $includeSelectorsForMediaSizes
-///	  Will generate additional selectors for flex layout media sizes
-@mixin layout-gap-attributes($from: 1, $to: 24, $gapUnits: px em rem, $includeSelectorsForMediaSizes: true) {
-	@for $i from $from through $to {
-		@each $unit in $gapUnits {
-			*[data-layout-gap="#{$i}#{$unit}"] {
-				gap: #{$i}#{$unit};
-			}
-		}
-	}
-	@if $includeSelectorsForMediaSizes {
-		@each $name, $_ in $flex-layout-media-queries {
-			@include flex-layout-media($name) {
-				@for $i from $from through $to {
-					@each $unit in $gapUnits {
-						*[data-layout-gap-#{$name}="#{$i}#{$unit}"] {
-							gap: #{$i}#{$unit};
-						}
-					}
-				}
-			}
-		}
-	}
-}

test/test.scss

@@ -5,5 +5,7 @@ $includeResponsiveApi: true;
 
 @include fx.attribute-selectors($includeResponsiveApi);
 @include fx.class-selectors($includeResponsiveApi);
-@include fx.gap-attribute-selectors(1, 16, px em, $includeResponsiveApi);
-@include fx.gap-class-selectors(1, 16, px em, $includeResponsiveApi);
+@include fx.gap-attribute-selectors(1, 8, px em, $includeResponsiveApi);
+@include fx.gap-class-selectors(1, 8, px em, $includeResponsiveApi);
+@include fx.gap-attribute-selectors-from-list(16 32 48, px em, $includeResponsiveApi);
+@include fx.gap-class-selectors-from-list(16 32 48, px em, $includeResponsiveApi);