refactor: factorize Float/XY Grid size functions into `fraction-to-percentage()`

diff --git a/scss/grid/_column.scss b/scss/grid/_column.scss
index cddf6e49437ddb06a1d38cfeb7a688d9d09044af..d0fa732a73a1d5bda2c3592ee5734faf9c6dd093 100644 (file)
--- a/scss/grid/_column.scss
+++ b/scss/grid/_column.scss
@@ -16,37 +16,7 @@
 ///
 /// @returns {Number} A calculated percentage value.
 @function grid-column($columns) {
-  $width: 0%;
-
-  // Parsing percents, decimals, and column counts
-  @if type-of($columns) == 'number' {
-    @if unit($columns) == '%' {
-      $width: $columns;
-    }
-    @else if $columns < 1 {
-      $width: percentage($columns);
-    }
-    @else {
-      $width: percentage($columns / $grid-column-count);
-    }
-  }
-
-  // Parsing "n of n" expressions
-  @else if type-of($columns) == 'list' {
-    @if length($columns) != 3 {
-      @error 'Wrong syntax for grid-column(). Use the format "n of n".';
-    }
-    @else {
-      $width: percentage(nth($columns, 1) / nth($columns, 3));
-    }
-  }
-
-  // Anything else is incorrect
-  @else {
-    @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".';
-  }
-
-  @return $width;
+  @return fraction-to-percentage($columns, $denominator: $grid-columns);
 }
 
 /// Creates a grid column.

diff --git a/scss/util/_math.scss b/scss/util/_math.scss
index e3d1908864eab9ad059826d41c85d72da72ca447..4acaef95b76a2638aa6084abb4cb4524d489df5a 100644 (file)
--- a/scss/util/_math.scss
+++ b/scss/util/_math.scss
@@ -70,3 +70,46 @@
   $h: nth($ratio, 3);
   @return $h / $w * 100%;
 }
+
+/// Calculate a percentage from a given fraction.
+///
+/// @param {Number|List} $fraction - Value representing a fraction to use to calculate the percentage, formatted as `50` (relative to `$denominator`), `50%`, `1 of 2` or `1/2`.
+/// @param {Number|List} $denominator - Default value to use as denominator when `$fraction` represents an absolute value.
+@function fraction-to-percentage(
+  $fraction,
+  $denominator: null
+) {
+  $pc: null;
+
+  // Parsing percents, decimals, n of n and number counts
+  @if type-of($fraction) == 'number' {
+    @if unit($fraction) == '%' {
+      $pc: $fraction;
+    }
+    @else if $fraction < 1 {
+      $pc: percentage($fraction);
+    }
+    @else if type-of($denominator) == 'number' {
+      $pc: percentage($fraction / $denominator);
+    }
+    @else {
+      @error 'Error with "fraction-to-percentage()". A default "$denominator" is required to support absolute values';
+    }
+  }
+
+  // Parsing "n of n" or "n/n" expressions
+  @else if type-of($fraction) == 'list' {
+    @if length($fraction) != 3 {
+      @error 'Wrong syntax for "fraction-to-percentage()". Use a number, decimal, percentage, or "n of n" / "n/n".';
+    }
+    @else {
+      $pc: percentage(nth($fraction, 1) / nth($fraction, 3));
+    }
+  }
+  // Anything else is incorrect
+  @else {
+    @error 'Wrong syntax for "fraction-to-percentage()". Use a number, decimal, percentage, or "n of n" / "n/n".';
+  }
+
+  @return $pc;
+}

diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 524803ff91eb496c5064c6a6f0ce5c0330a566ae..f0fd0ee8b038a0ebfb4d719b8d077497189c9c21 100644 (file)
--- a/scss/xy-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -12,34 +12,7 @@
 @function xy-cell-size(
   $size: $grid-columns
 ) {
-  // Parsing percents, decimals, n of n and number counts
-  @if type-of($size) == 'number' {
-    @if unit($size) == '%' {
-      $size: $size;
-    }
-    @else if $size < 1 {
-      $size: percentage($size);
-    }
-    @else {
-      $size: percentage($size / $grid-columns);
-    }
-  }
-
-  // Parsing "n of n" or "n/n" expressions
-  @else if type-of($size) == 'list' {
-    @if length($size) != 3 {
-      @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
-    }
-    @else {
-      $size: percentage(nth($size, 1) / nth($size, 3));
-    }
-  }
-  // Anything else is incorrect
-  @else {
-    @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
-  }
-
-  @return $size;
+  @return fraction-to-percentage($size, $denominator: $grid-columns);
 }
 
 /// Sets base flex properties for cells.