refactor: get rid of slash divisions for dart sass compatibility

# Conflicts:
#	scss/forms/_label.scss

diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
index 1e05469c86290d8b01c6d55551af6a873e2371a5..321678dd98eff404b568e7caaa86f0f002208cbb 100644 (file)
--- a/scss/components/_accordion-menu.scss
+++ b/scss/components/_accordion-menu.scss
@@ -58,7 +58,7 @@ $accordionmenu-arrow-size: 6px !default;
       @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
       position: absolute;
       top: 50%;
-      margin-top: -1 * ($accordionmenu-arrow-size / 2);
+      margin-top: -1 * ($accordionmenu-arrow-size * 0.5);
       #{$global-right}: 1rem;
     }
   }

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 035097f4acb7c259808dc268d82e48fec42be78b..92da7d269dc0961117822d2e6cdbdfa85668e227 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -130,7 +130,7 @@ $buttongroup-radius-on-each: true !default;
         &:first-child:nth-last-child(#{$i}) {
           &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
             display: inline-block;
-            width: calc(#{percentage(1 / $i)} - #{$spacing});
+            width: calc(#{percentage(divide(1, $i))} - #{$spacing});
             margin-#{$global-right}: $spacing;
 
             &:last-child {

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 3aa14cdd64c3728beaef3234733f725dda037622..3d180a25cdea8a0670c15a046072edafabff29a4 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -107,7 +107,7 @@ $dropdown-menu-item-background-active: transparent !default;
         @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
         #{$global-right}: 5px;
         #{$global-left}: auto;
-        margin-top: -1 * ($dropdownmenu-arrow-size / 2);
+        margin-top: -1 * ($dropdownmenu-arrow-size * 0.5);
       }
     }
   }

diff --git a/scss/components/_table.scss b/scss/components/_table.scss
index 1627f8829659db9fd23851358818be405ce12d8b..d09bc7a1b2dc82261c757e9ee01efcaef9ac6ddf 100644 (file)
--- a/scss/components/_table.scss
+++ b/scss/components/_table.scss
@@ -50,7 +50,7 @@ $table-stripe: even !default;
 
 /// Default color for header background.
 /// @type Color
-$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5) !default;
 
 /// Default color of header rows on hover.
 /// @type List

diff --git a/scss/forms/_label.scss b/scss/forms/_label.scss
index ca02557584e0f9a3ce5b72f673b8b176a893ebe3..8620876a2e37502976b224dd0556dd2360c03fc8 100644 (file)
--- a/scss/forms/_label.scss
+++ b/scss/forms/_label.scss
@@ -37,7 +37,7 @@ $form-label-line-height: 1.8 !default;
 
   margin: 0 0 $form-spacing;
   line-height: $global-lineheight;
-  padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
+  padding: ($form-spacing * 0.5 + rem-calc($input-border-width)) 0;
 }
 
 @mixin foundation-form-label {

diff --git a/scss/forms/_range.scss b/scss/forms/_range.scss
index 99a283919cde0a056d0dd171d954d55a529169dc..f907df9bed87ca25e649751c00aca1932b951b59 100644 (file)
--- a/scss/forms/_range.scss
+++ b/scss/forms/_range.scss
@@ -40,7 +40,7 @@ $slider-radius: $global-radius !default;
 
 @mixin foundation-range-input {
   input[type='range'] {  // sass-lint:disable-line no-qualifying-elements
-    $margin: ($slider-handle-height - $slider-height) / 2;
+    $margin: ($slider-handle-height - $slider-height) * 0.5;
 
     display: block;
     width: 100%;

diff --git a/scss/forms/_text.scss b/scss/forms/_text.scss
index 5b67b5ceb6c8be64cde6a73d96ad8d57cacb91f4..0081c53a005f56732a55b47b3241921975ffaed7 100644 (file)
--- a/scss/forms/_text.scss
+++ b/scss/forms/_text.scss
@@ -52,7 +52,7 @@ $input-border-focus: 1px solid $dark-gray !default;
 
 /// Padding of text inputs.
 /// @type Color
-$input-padding: $form-spacing / 2 !default;
+$input-padding: $form-spacing * 0.5 !default;
 
 /// Box shadow inside text inputs when not focused.
 /// @type Shadow

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 06585d5e8ae56a543c6f5ba99d24b4edf9a14579..bda00e9c06ae1a5ac27e2907bafef4938656ffb9 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -102,7 +102,7 @@
   flex-wrap: wrap;
 
   > #{$selector} {
-    $pct: percentage(1/$n);
+    $pct: percentage(divide(1, $n));
 
     flex: 0 0 $pct;
     max-width: $pct;

diff --git a/scss/grid/_gutter.scss b/scss/grid/_gutter.scss
index c7b5fb368f741eb68818a13c2fd859d992ab5181..7ec0f4599ebc7fee82af53b4d2f52632ec022fa9 100644 (file)
--- a/scss/grid/_gutter.scss
+++ b/scss/grid/_gutter.scss
@@ -18,7 +18,7 @@
   $gutters: $grid-column-gutter
 ) {
   @include -zf-breakpoint-value($gutter, $gutters) {
-    $padding: rem-calc($-zf-bp-value) / 2;
+    $padding: rem-calc($-zf-bp-value) * 0.5;
 
     padding-right: $padding;
     padding-left: $padding;

diff --git a/scss/grid/_layout.scss b/scss/grid/_layout.scss
index dde2083ed03a5d21c1d47b5588c9895d5e3e0c2c..ba8e2812e8f3f3a860c51aa3288bf00e86dcec9a 100644 (file)
--- a/scss/grid/_layout.scss
+++ b/scss/grid/_layout.scss
@@ -21,14 +21,14 @@
 ) {
   & > #{$selector} {
     float: $global-left;
-    width: percentage(1/$n);
+    width: percentage(divide(1, $n));
 
     // If a $gutter value is passed
     @if($gutter) {
       // Gutters
       @if type-of($gutter) == 'map' {
         @each $breakpoint, $value in $gutter {
-          $padding: rem-calc($value) / 2;
+          $padding: rem-calc($value) * 0.5;
 
           @include breakpoint($breakpoint) {
             padding-right: $padding;
@@ -37,7 +37,7 @@
         }
       }
       @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
-        $padding: rem-calc($gutter) / 2;
+        $padding: rem-calc($gutter) * 0.5;
         padding-right: $padding;
         padding-left: $padding;
       }
@@ -64,12 +64,12 @@
   @for $i from 1 to $n {
     @if $i == 1 {
       &:nth-child(#{$n}n+1):last-child {
-        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+        margin-left: (100 - divide(100, $n) * $i) * 0.5 * 1%;
       }
     }
     @else {
       &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
-        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+        margin-left: (100 - divide(100, $n) * $i) * 0.5 * 1%;
       }
     }
   }

diff --git a/scss/grid/_position.scss b/scss/grid/_position.scss
index 56f6f7e1fb9b01e89d2506348f6c8bb1f247d30f..40f71344e9cd5c613e586f4a9b103b9c392e3dd0 100644 (file)
--- a/scss/grid/_position.scss
+++ b/scss/grid/_position.scss
@@ -32,7 +32,7 @@
 
   // Push/pull
   @else if type-of($position) == 'number' {
-    $offset: percentage($position / $grid-column-count);
+    $offset: percentage(divide($position, $grid-column-count));
 
     position: relative;
     #{$global-left}: $offset;

diff --git a/scss/grid/_row.scss b/scss/grid/_row.scss
index 9356fb25ef7c106dbbc3ba67eb128ad1dbb5a97d..0168c413139690bffb5a95d3f233ef02bbe41a71 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(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;
+    $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) * 0.5 * -1;
 
     margin-right: $margin;
     margin-left: $margin;

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 8a9ab56a19ef09910065856156d4a08cf3be6811..952009181db1f6d0ace85b70365e14986c48f01d 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -461,7 +461,7 @@ $input-background-focus: $white;
 $input-background-disabled: $light-gray;
 $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;
-$input-padding: $form-spacing / 2;
+$input-padding: $form-spacing * 0.5;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1);
 $input-shadow-focus: 0 0 5px $medium-gray;
 $input-cursor-disabled: not-allowed;
@@ -807,7 +807,7 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
 $table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
 $table-head-row-hover: darken($table-head-background, $table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
 $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);

diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index f05325a82e261f722cee8bf4ea8d49c342852096..08fbdef7a7464cc19b099b406f249b2a3290be97 100644 (file)
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -119,7 +119,7 @@ $breakpoint-classes: (small medium large) !default;
       // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
       // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
       // See https://github.com/foundation/foundation-sites/issues/11313
-      $bp-max: if($hidpi, $bp-next - (1/$std-web-dpi), -zf-bp-to-em($bp-next) - 0.00125);
+      $bp-max: if($hidpi, $bp-next - divide(1, $std-web-dpi), -zf-bp-to-em($bp-next) - 0.00125);
     }
   }
 

diff --git a/scss/util/_color.scss b/scss/util/_color.scss
index 8b15c813a61111badf5639c03b28c806ef94400b..262ed41742b99c6e698b2417f7a2379ff0ecf102 100644 (file)
--- a/scss/util/_color.scss
+++ b/scss/util/_color.scss
@@ -33,9 +33,9 @@ $success-color:null;
 
   @for $i from 1 through 3 {
     $rgb: nth($rgba, $i);
-    $rgb: $rgb / 255;
+    $rgb: divide($rgb, 255);
 
-    $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
+    $rgb: if($rgb < 0.03928, divide($rgb, 12.92), pow(divide($rgb + 0.055, 1.055), 2.4));
 
     $rgba2: append($rgba2, $rgb);
   }
@@ -54,13 +54,13 @@ $success-color:null;
   // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
   $luminance1: color-luminance($color1) + 0.05;
   $luminance2: color-luminance($color2) + 0.05;
-  $ratio: $luminance1 / $luminance2;
+  $ratio: divide($luminance1, $luminance2);
 
   @if $luminance2 > $luminance1 {
-    $ratio: 1 / $ratio;
+    $ratio: divide(1, $ratio);
   }
 
-  $ratio: round($ratio * 10) / 10;
+  $ratio: round($ratio * 10) * 0.1;
 
   @return $ratio;
 }

diff --git a/scss/util/_direction.scss b/scss/util/_direction.scss
index 8241e8da1f4c48b39a6330f623d3302bec32c9a6..eff40d1674ed95567b9abe2a7fb17d4d178a5773 100644 (file)
--- a/scss/util/_direction.scss
+++ b/scss/util/_direction.scss
@@ -23,7 +23,7 @@
 
   // Calculate the opposite place in a circle, with a starting index of 1
   $length: length($dirs);
-  $demi: $length / 2;
+  $demi: $length * 0.5;
   $opposite-place: (($place + $demi - 1) % $length) + 1;
 
   @return nth($dirs, $opposite-place);

diff --git a/scss/util/_math.scss b/scss/util/_math.scss
index c94b2c9c474c1e9bcee6176a33a684aad4f16cee..a9dddcbe603fe2ae5c6ff0b4311f13ce6b8b3397 100644 (file)
--- a/scss/util/_math.scss
+++ b/scss/util/_math.scss
@@ -33,7 +33,7 @@
     $prec2 : pow(10, $prec);
     $exponent: round($exponent * $prec2);
     $denominator: gcd($exponent, $prec2);
-    @return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
+    @return nth-root(pow($base, divide($exponent, $denominator)), divide($prec2, $denominator), $prec);
   }
 
   $value: $base;
@@ -44,7 +44,7 @@
   }
   @else if $exponent < 1 {
     @for $i from 0 through -$exponent {
-      $value: $value / $base;
+      $value: divide($value, $base);
     }
   }
 
@@ -56,7 +56,7 @@
   $x: 1;
 
   @for $i from 0 through $prec {
-    $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));
+    $x: divide(1, $n) * (($n - 1) * $x + divide($num, pow($x, $n - 1)));
   }
 
   @return $x;
@@ -68,7 +68,7 @@
 @function ratio-to-percentage($ratio) {
   $w: nth($ratio, 1);
   $h: nth($ratio, 3);
-  @return $h / $w * 100%;
+  @return divide($h, $w) * 100%;
 }
 
 /// Parse the given `$fraction` to numerators and denumerators.
@@ -143,5 +143,5 @@
     }
   }
 
-  @return percentage($parsed-nominator / $parsed-denominator);
+  @return percentage(divide($parsed-nominator, $parsed-denominator));
 }

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index 512f2827f2a6e38f724060673df3c7322cfb525a..a723df58f18034979c320b0451194b93743d9c22 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -96,7 +96,7 @@ $-zf-pb-value: null;
   $hover-shadow: ();
 
   // Spacing between bars is calculated based on the total height of the icon and the weight of each bar
-  $spacing: ($height - ($weight * $bars)) / ($bars - 1);
+  $spacing: divide($height - ($weight * $bars), $bars - 1);
 
   @if unit($spacing) == 'px' {
     $spacing: floor($spacing);
@@ -197,7 +197,7 @@ $-zf-pb-value: null;
   @for $i from 2 through $max {
     &:nth-last-child(#{$i}):first-child,
     &:nth-last-child(#{$i}):first-child ~ #{$elem} {
-      width: percentage(1 / $i);
+      width: percentage(divide(1, $i));
     }
   }
 }

diff --git a/scss/util/_unit.scss b/scss/util/_unit.scss
index beebcdf53c8e993e0136e7f52c2c992d6e670e73..e1bd81a0fd1aa71e431b98e16d789c497994b293 100644 (file)
--- a/scss/util/_unit.scss
+++ b/scss/util/_unit.scss
@@ -2,6 +2,8 @@
 // https://get.foundation
 // Licensed under MIT Open Source
 
+@import 'math';
+
 ////
 /// @group functions
 ////
@@ -14,7 +16,7 @@ $global-font-size: 100% !default;
 ///
 /// @returns {Number} The same number, sans unit.
 @function strip-unit($num) {
-  @return $num / ($num * 0 + 1);
+  @return divide($num, $num * 0 + 1);
 }
 
 /// Converts one or more pixel values into matching rem values.
@@ -35,7 +37,7 @@ $global-font-size: 100% !default;
   // If the base font size is a %, then multiply it by 16px
   // This is because 100% font size = 16px in most all browsers
   @if unit($base) == '%' {
-    $base: ($base / 100%) * 16px;
+    $base: divide($base, 100%) * 16px;
   }
 
   // Using rem as base allows correct scaling
@@ -86,7 +88,7 @@ $global-font-size: 100% !default;
 
   // Calculate rem if units for $value is not rem or em
   @if unit($value) != 'rem' {
-    $value: strip-unit($value) / strip-unit($base) * 1rem;
+    $value: divide(strip-unit($value), strip-unit($base)) * 1rem;
   }
 
   // Turn 0rem into 0
@@ -114,7 +116,7 @@ $global-font-size: 100% !default;
 
   // If the base font size is a %, then multiply it by 16px
   @if unit($base) == '%' {
-    $base: ($base / 100%) * 16px;
+    $base: divide($base, 100%) * 16px;
   }
 
   @if unit($base) == 'rem' {
@@ -127,7 +129,7 @@ $global-font-size: 100% !default;
 
   // Now let's convert our value to pixels too
   @if unit($value) == '%' {
-    $value: ($value / 100%) * $base;
+    $value: divide($value, 100%) * $base;
   }
 
   @if unit($value) == 'rem' {
@@ -140,12 +142,12 @@ $global-font-size: 100% !default;
 
   // 'px'
   @if unit($value) == 'px' {
-    @return strip-unit($value) / strip-unit($base);
+    @return divide(strip-unit($value), strip-unit($base));
   }
 
   // assume that line-heights greater than 10 are meant to be absolute in 'px'
   @if unitless($value) and ($value > 10) {
-    @return $value / strip-unit($base);
+    @return divide($value, strip-unit($base));
   }
 
   @return $value;

diff --git a/scss/xy-grid/_gutters.scss b/scss/xy-grid/_gutters.scss
index ff3ea3c90f724d7a562d7e64da133e2aa72db1c4..839e8746f6c5fdf6ceb70c2dc0d4c65be444681f 100644 (file)
--- a/scss/xy-grid/_gutters.scss
+++ b/scss/xy-grid/_gutters.scss
@@ -26,7 +26,7 @@
   // Output our margin gutters.
   @if (type-of($gutters) == 'map') {
     @include -zf-breakpoint-value(auto, $gutters) {
-      $gutter: rem-calc($-zf-bp-value) / 2;
+      $gutter: rem-calc($-zf-bp-value) * 0.5;
 
       // Loop through each gutter position
       @each $value in $gutter-position {
@@ -35,7 +35,7 @@
     }
   }
   @else if (type-of($gutters) == 'number') {
-    $gutter: rem-calc($gutters) / 2;
+    $gutter: rem-calc($gutters) * 0.5;
 
     // Loop through each gutter position
     @each $value in $gutter-position {

diff --git a/scss/xy-grid/_layout.scss b/scss/xy-grid/_layout.scss
index d087825acbf214df2a281cc5e6bb2e7654958a23..d62e797c10bdc65b4151d49e97a0a8daf93de815 100644 (file)
--- a/scss/xy-grid/_layout.scss
+++ b/scss/xy-grid/_layout.scss
@@ -28,7 +28,7 @@
   $vertical: false,
   $output: (base size gutters)
 ) {
-  $size: percentage(1/$n);
+  $size: percentage(divide(1, $n));
 
   & > #{$selector} {
     @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);

diff --git a/scss/xy-grid/_position.scss b/scss/xy-grid/_position.scss
index 414f5bb77f8f6dd98436755f5cc775661b6d8b3e..b59e44a8929aaa0ff1d8e589f7d877d52f9da3c1 100644 (file)
--- a/scss/xy-grid/_position.scss
+++ b/scss/xy-grid/_position.scss
@@ -25,7 +25,7 @@
 
   $offset: $size;
   @if ($gutter-type == 'margin') {
-    $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint) / 2);
+    $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint) * 0.5);
     $offset: if($gutter == 0, $size, calc(#{$size} + #{$gutter}));
   }
   @return $offset;

diff --git a/test/sass/_components.scss b/test/sass/_components.scss
index 0e8bf0e705eba143252e61ed41cc7665fea2e7b8..f6dd2a082c3c10abb3e8a0f72b11aff79cf41d84 100644 (file)
--- a/test/sass/_components.scss
+++ b/test/sass/_components.scss
@@ -9,7 +9,7 @@
 
   @include test('Ratio to Percentage [function]') {
     $test: ratio-to-percentage(3 by 4);
-    $expect: 4 / 3 * 100%;
+    $expect: divide(4, 3) * 100%;
 
     @include assert-equal($test, $expect,
       'Creates a percentage value from a ratio');