Factorize breakpoint map handling in grid gutters and margins

Factorize breakpoint map handling in `grid-column-gutter` and
`grid-column-margin` mixins.

Changes:
- Add the `-zf-breakpoint-value` mixin which generate its content with
the value `$-zf-bp-value` depending on its parameter, like
`grid-column-gutter` and `grid-column-margin` did (see the `@mixin
-zf-breakpoint-value` doc)
- Use the `-zf-breakpoint-value` mixin in `grid-column-gutter` and
`grid-column-margin` and remove duplicated code.
- Rename the `grid-column-gutter` function to `-zf-breakpoint-value`
and move it to `/scss/util/_breakpoint.scss`. This function had a
generic behaviour.

diff --git a/scss/grid/_gutter.scss b/scss/grid/_gutter.scss
index 3d9b311835d8b09c5a2e76d3cfc43ad31617d58b..cbc5e5a3909cf8f22849494202c1ec31c9c4d7e2 100644 (file)
--- a/scss/grid/_gutter.scss
+++ b/scss/grid/_gutter.scss
@@ -6,24 +6,6 @@
 /// @group grid
 ////
 
-/// Get a gutter size for a given breakpoint
-/// @param {Keyword} $breakpoint [small] - Breakpoint name.
-/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default.
-///
-/// @returns {Number} Gutter size.
-@function grid-column-gutter(
-  $breakpoint: $-zf-zero-breakpoint,
-  $gutters: $grid-column-gutter
-) {
-  // If gutter is single value, return it
-  @if type-of($gutters) == 'number' {
-    @return $gutters;
-  }
-
-  // Else, return the corresponding responsive value
-  @return -zf-get-bp-val($gutters, $breakpoint);
-}
-
 /// Set the gutters on a column
 /// @param {Number|Keyword} $gutter [auto]
 ///   Spacing between columns, accepts multiple values:
@@ -35,22 +17,8 @@
   $gutter: auto,
   $gutters: $grid-column-gutter
 ) {
-  @if $gutter == auto and type-of($gutters) == 'map' {
-    // "auto"
-    @each $breakpoint, $value in $gutters {
-      @include breakpoint($breakpoint) {
-        @include grid-column-gutter($value);
-      }
-    }
-  }
-  @else {
-    // breakpoint name
-    @if type-of($gutter) == 'string' {
-      $gutter: grid-column-gutter($gutter, $gutters);
-    }
-
-    // single value
-    $padding: rem-calc($gutter) / 2;
+  @include -zf-breakpoint-value($gutter, $gutters) {
+    $padding: rem-calc($-zf-bp-value) / 2;
 
     padding-right: $padding;
     padding-left: $padding;
@@ -103,23 +71,10 @@
   $margin: auto,
   $margins: $grid-column-gutter
 ) {
-  @if $margin == auto and type-of($margins) == 'map' {
-    // "auto"
-    @each $breakpoint, $value in $margins {
-      @include breakpoint($breakpoint) {
-        @include grid-column-margin($value);
-      }
-    }
-  } @else {
-    // breakpoint name
-    @if type-of($margin) == 'string' {
-      $margin: grid-column-gutter($margin, $margins);
-    }
-
-    // single value
-    $margin-bottom: rem-calc($margin);
+  @include -zf-breakpoint-value($margin, $margins) {
+    $margin-bottom: rem-calc($-zf-bp-value);
     margin-bottom: $margin-bottom;
-    
+
     > :last-child {
       margin-bottom: 0;
     }

diff --git a/scss/grid/_row.scss b/scss/grid/_row.scss
index 36c7c192e53e50e7b313256da58697650d018910..b84f9c03e27f6512b471c989b11fce5a3e5f78de 100644 (file)
--- a/scss/grid/_row.scss
+++ b/scss/grid/_row.scss
@@ -80,7 +80,7 @@
 /// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
 @mixin grid-row-nest($gutters: $grid-column-gutter) {
   @include -zf-each-breakpoint {
-    $margin: rem-calc(grid-column-gutter($-zf-size, $gutters)) / 2 * -1;
+    $margin: rem-calc(-zf-breakpoint-value($-zf-size, $gutters)) / 2 * -1;
 
     margin-right: $margin;
     margin-left: $margin;

diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index 50f6f22b90c0fec8d7d3f8b2f9589260ff8f6925..f4b142f0928e2fdb831b05431c93411b8aadfea7 100644 (file)
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -248,6 +248,24 @@ $breakpoint-classes: (small medium large) !default;
   }
 }
 
+/// Get a value in a map for a given breakpoint name
+/// @param {Keyword} $bp-name [small] - Breakpoint name.
+/// @param {Number|Map} $bp-values-map - Map of breakpoints and values or single value to use.
+///
+/// @returns {Number} Breakpoint-related value from `$bp-values-map`.
+@function -zf-breakpoint-value(
+  $bp-name: $-zf-zero-breakpoint,
+  $bp-values-map: null
+) {
+  // If the map is a single value, return it
+  @if type-of($bp-values-map) == 'number' {
+    @return $bp-values-map;
+  }
+
+  // Else, return the corresponding breakpoint value
+  @return -zf-get-bp-val($bp-values-map, $bp-name);
+}
+
 // Legacy breakpoint variables
 // These will be removed in 6.3
 $small-up: null;

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index 353bc32fcdd750e7edcc179ee099edc0baa0ed6c..aae42d89c254e166b00d42ecef4518d766f9aa58 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -242,3 +242,36 @@
     }
   }
 }
+
+/// Generate the content passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter.
+/// @param {Number|Keyword} $name [auto]
+///   The $name parameter accepts multiple values:
+///   - A single value will be directly passed as `$-zf-bp-value` to the mixin content.
+///   - A breakpoint name will make `$-zf-bp-value` the corresponding value in `$map`.
+///   - "auto" will generate the mixin content for each breakpoint in `$map` with the corresponding value as `$-zf-bp-value`.
+/// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
+@mixin -zf-breakpoint-value(
+  $name: auto,
+  $map: null
+) {
+  @if $name == auto and type-of($map) == 'map' {
+    // "auto"
+    @each $k, $v in $map {
+      @include breakpoint($k) {
+        @include -zf-breakpoint-value($v, $map) {
+          @content;
+        }
+      }
+    }
+  }
+  @else {
+    // breakpoint name
+    @if type-of($name) == 'string' {
+      $name: -zf-breakpoint-value($name, $map);
+    }
+
+    // breakpoint value
+    $-zf-bp-value: $name !global;
+    @content;
+  }
+}