Remove slash division in favour of math.div

scss/_base.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @import 'variables';
 
 @mixin hamburger-bar() {
@@ -82,7 +84,7 @@ div.#{$hamburger-class-name} {
 
     > .inner {
         margin: 0;
-        margin-top: -$hamburger-thickness / 2;
+        margin-top: math.div(-$hamburger-thickness, 2);
         position: relative;
         width: 100%;
     }

scss/_variables.scss

@@ -18,10 +18,10 @@ $hamburger-border-width: 0 !default;
 $hamburger-opacity: 1 !default;
 $hamburger-opacity-hover: 1 !default;
 $hamburger-opacity-transition-speed: 0.2s !default;
-$hamburger-padding: round($hamburger-size / 10) !default;
+$hamburger-padding: round(math.div($hamburger-size, 10)) !default;
 $hamburger-border-radius: 0 !default;
 $hamburger-bar-border-radius: 0 !default;
-$hamburger-bar-spacing: round($hamburger-size / 5) !default;
+$hamburger-bar-spacing: round(math.div($hamburger-size, 5)) !default;
 $hamburger-animation-speed: 1 !default;
 $hamburger-extra-transition-rules: & !default;
 

scss/animations/_apple.scss

@@ -4,11 +4,11 @@
 @if index($hamburger-animations, apple) {
     .#{$hamburger-class-name}--apple {
         > .inner {
-            transition: transform 0.5s / $hamburger-animation-speed $hamburger-easing;
+            transition: transform math.div(0.5s, $hamburger-animation-speed) $hamburger-easing;
         }
 
         span.bar {
-            transition: transform 0.35s / $hamburger-animation-speed $hamburger-easing;
+            transition: transform math.div(0.35s, $hamburger-animation-speed) $hamburger-easing;
 
             &:nth-child(1) {
                 top: 0;
@@ -27,12 +27,12 @@
 
         &.#{$hamburger-active-class-name} {
             > .inner {
-                transform: rotate(90deg) translate3d($hamburger-thickness / 2, -$hamburger-thickness / 2, 0);
-                transition: transform 0.35s / $hamburger-animation-speed $hamburger-easing;
+                transform: rotate(90deg) translate3d(math.div($hamburger-thickness, 2), math.div(-$hamburger-thickness, 2), 0);
+                transition: transform math.div(0.35s, $hamburger-animation-speed) $hamburger-easing;
             }
 
             span.bar {
-                transition: transform 0.35s / $hamburger-animation-speed $hamburger-easing 0.15s / $hamburger-animation-speed;
+                transition: transform math.div(0.35s, $hamburger-animation-speed) $hamburger-easing math.div(0.15s, $hamburger-animation-speed);
 
                 &:nth-child(1) {
                     transform: rotate(45deg) translate3d(0, 0, 0);

scss/animations/_arrow-right.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @import '../variables';
 @import 'arrow';
 
@@ -25,18 +27,18 @@
 
             span.bar {
                 $scale: 0.4;
-                $offset: $hamburger-bar-spacing / $root-two + $hamburger-thickness / 2 / $root-two;
+                $offset: math.div($hamburger-bar-spacing, $root-two) + math.div(math.div($hamburger-thickness, 2), $root-two);
 
                 &:nth-child(1) {
-                    transform: rotate(-45deg) scaleX($scale) translate3d(-$offset / $scale, $offset, 0);
+                    transform: rotate(-45deg) scaleX($scale) translate3d(math.div(-$offset, $scale), $offset, 0);
                 }
 
                 &:nth-child(2) {
-                    transform: scaleX(1 - $hamburger-thickness / $hamburger-bar-size);
+                    transform: scaleX(1 - math.div($hamburger-thickness, $hamburger-bar-size));
                 }
 
                 &:nth-child(3) {
-                    transform: rotate(45deg) scaleX($scale) translate3d(-$offset / $scale, -$offset, 0);
+                    transform: rotate(45deg) scaleX($scale) translate3d(math.div(-$offset, $scale), -$offset, 0);
                 }
             }
 

scss/animations/_arrow.scss

@@ -1,15 +1,17 @@
+@use 'sass:math';
+
 @import '../variables';
 
 @if index($hamburger-animations, arrow) or index($hamburger-animations, arrow-r) {
     .#{$hamburger-class-name}--arrow,
     .#{$hamburger-class-name}--arrow-right {
         > .inner {
-            transition: transform 0.5s / $hamburger-animation-speed $hamburger-easing;
+            transition: transform math.div(0.5s, $hamburger-animation-speed) $hamburger-easing;
         }
 
         span.bar {
-            transition: transform 0.3s / $hamburger-animation-speed $hamburger-easing;
-            transition-delay: 0.1s / $hamburger-animation-speed;
+            transition: transform math.div(0.3s, $hamburger-animation-speed) $hamburger-easing;
+            transition-delay: math.div(0.1s, $hamburger-animation-speed);
 
             &:nth-child(1) {
                 transform-origin: 100% 0;
@@ -31,20 +33,20 @@
 
             span.bar {
                 $scale: 0.4;
-                $offset: $hamburger-bar-spacing / $root-two + $hamburger-thickness / 2 / $root-two;
+                $offset: math.div($hamburger-bar-spacing, $root-two) + math.div(math.div($hamburger-thickness, 2), $root-two);
 
                 transition-delay: 0s;
 
                 &:nth-child(1) {
-                    transform: rotate(45deg) scaleX($scale) translate3d($offset / $scale, $offset, 0);
+                    transform: rotate(45deg) scaleX($scale) translate3d(math.div($offset, $scale), $offset, 0);
                 }
 
                 &:nth-child(2) {
-                    transform: scaleX(1 - $hamburger-thickness / $hamburger-bar-size);
+                    transform: scaleX(1 - math.div($hamburger-thickness, $hamburger-bar-size));
                 }
 
                 &:nth-child(3) {
-                    transform: rotate(-45deg) scaleX($scale) translate3d($offset / $scale, -$offset, 0);
+                    transform: rotate(-45deg) scaleX($scale) translate3d(math.div($offset, $scale), -$offset, 0);
                 }
             }
 

scss/animations/_chop.scss

@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 @import '../variables';
 
 @if index($hamburger-animations, chop) {
     .#{$hamburger-class-name}--chop {
         span.bar {
             transition:
-                transform 0.3s / $hamburger-animation-speed $hamburger-easing,
-                opacity 0.3s / $hamburger-animation-speed $hamburger-easing;
+                transform math.div(0.3s, $hamburger-animation-speed) $hamburger-easing,
+                opacity math.div(0.3s, $hamburger-animation-speed) $hamburger-easing;
 
             &:nth-child(1) {
                 top: 0;

scss/animations/_collapse.scss

@@ -4,12 +4,12 @@
 @if index($hamburger-animations, collapse) {
     .#{$hamburger-class-name}--collapse {
         span.bar {
-            transition: transform 0.3s / $hamburger-animation-speed $hamburger-easing 0.2s / $hamburger-animation-speed,
-                opacity 0.25s / $hamburger-animation-speed $hamburger-easing 0.25s / $hamburger-animation-speed,;
+            transition: transform math.div(0.3s, $hamburger-animation-speed) $hamburger-easing math.div(0.2s, $hamburger-animation-speed),
+                opacity math.div(0.25s, $hamburger-animation-speed) $hamburger-easing math.div(0.25s, $hamburger-animation-speed),;
 
             &::before {
                 @include hamburger-bar();
-                transition: transform 0.35s / $hamburger-animation-speed $hamburger-easing;
+                transition: transform math.div(0.35s, $hamburger-animation-speed) $hamburger-easing;
             }
 
             &:nth-child(1),
@@ -29,15 +29,15 @@
 
         &.#{$hamburger-active-class-name} {
             span.bar {
-                transition: transform 0.25s / $hamburger-animation-speed $hamburger-easing, 
-                    opacity 0.25s / $hamburger-animation-speed $hamburger-easing;
+                transition: transform math.div(0.25s, $hamburger-animation-speed) $hamburger-easing, 
+                    opacity math.div(0.25s, $hamburger-animation-speed) $hamburger-easing;
 
                 &:nth-child(1),
                 &:nth-child(3) {
                     transform: translate3d(0, 0, 0);
 
                     &::before {
-                        transition: transform 0.35s / $hamburger-animation-speed $hamburger-easing 0.15s / $hamburger-animation-speed;
+                        transition: transform math.div(0.35s, $hamburger-animation-speed) $hamburger-easing math.div(0.15s, $hamburger-animation-speed);
                     }
                 }
 

scss/animations/_converge.scss

@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 @import '../variables';
 
 @if index($hamburger-animations, converge) {
     .#{$hamburger-class-name}--converge {
         span.bar {
             transition:
-                transform 0.3s / $hamburger-animation-speed $hamburger-easing,
-                opacity 0.3s / $hamburger-animation-speed $hamburger-easing;
+                transform math.div(0.3s, $hamburger-animation-speed) $hamburger-easing,
+                opacity math.div(0.3s, $hamburger-animation-speed) $hamburger-easing;
 
             &:nth-child(1) {
                 top: 0;

scss/animations/_criss-cross.scss

@@ -1,9 +1,11 @@
+@use 'sass:math';
+
 @import '../variables';
 
 @if index($hamburger-animations, criss-cross) {
     .#{$hamburger-class-name}--criss-cross {
-        $offset-y: $hamburger-bar-size / 2 / $root-two;
-        $offset-x: $hamburger-bar-size / 2 - $offset-y;
+        $offset-y: math.div(math.div($hamburger-bar-size, 2), $root-two);
+        $offset-x: math.div($hamburger-bar-size, 2) - $offset-y;
 
         > .inner {
             &::before,
@@ -13,8 +15,8 @@
                 opacity: 0;
                 transform-origin: 0 50%;
                 transition:
-                    opacity 0.4s / $hamburger-animation-speed $hamburger-easing,
-                    transform 0.4s / $hamburger-animation-speed $hamburger-easing;
+                    opacity math.div(0.4s, $hamburger-animation-speed) $hamburger-easing,
+                    transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing;
             }
 
             &::before {
@@ -23,19 +25,19 @@
 
             &::after {
                 transform: rotate(-45deg) translate3d(-$offset-x, $offset-y, 0) scaleX(0);
-                transition-delay: 0.1s / $hamburger-animation-speed;
+                transition-delay: math.div(0.1s, $hamburger-animation-speed);
             }
         }
 
         span.bar {
             transition:
-                transform 0.4s / $hamburger-animation-speed $hamburger-easing,
-                opacity 0.4s / $hamburger-animation-speed $hamburger-easing,
-                width 0.4s / $hamburger-animation-speed $hamburger-easing;
+                transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing,
+                opacity math.div(0.4s, $hamburger-animation-speed) $hamburger-easing,
+                width math.div(0.4s, $hamburger-animation-speed) $hamburger-easing;
 
             @for $i from 1 through 3 {
                 &:nth-child(#{$i}) {
-                    transition-delay: (0.3 + ($i * 0.03s)) / $hamburger-animation-speed;
+                    transition-delay: math.div(0.3 + ($i * 0.03s), $hamburger-animation-speed);
                 }
             }
         }
@@ -49,12 +51,12 @@
 
                 &::before {
                     transform: rotate(45deg) translate3d(-$offset-x, -$offset-y, 0);
-                    transition-delay: 0.4s / $hamburger-animation-speed;
+                    transition-delay: math.div(0.4s, $hamburger-animation-speed);
                 }
 
                 &::after {
                     transform: rotate(-45deg) translate3d(-$offset-x, $offset-y, 0);
-                    transition-delay: 0.5s / $hamburger-animation-speed;
+                    transition-delay: math.div(0.5s, $hamburger-animation-speed);
                 }
             }
 
@@ -64,15 +66,15 @@
                 width: 50%;
 
                 &:nth-child(1) {
-                    transition-delay: 0s / $hamburger-animation-speed;
+                    transition-delay: math.div(0s, $hamburger-animation-speed);
                 }
 
                 &:nth-child(2) {
-                    transition-delay: 0.2s / $hamburger-animation-speed;
+                    transition-delay: math.div(0.2s, $hamburger-animation-speed);
                 }
 
                 &:nth-child(3) {
-                    transition-delay: 0.1s / $hamburger-animation-speed;
+                    transition-delay: math.div(0.1s, $hamburger-animation-speed);
                 }
             }
         }

scss/animations/_dive.scss

@@ -4,7 +4,7 @@
 @if index($hamburger-animations, dive) {
     .#{$hamburger-class-name}--dive {
         span.bar {
-            transition: transform 0.4s / $hamburger-animation-speed $hamburger-easing;
+            transition: transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing;
 
             &:nth-child(1) {
                 top: 0;

scss/animations/_flatten.scss

@@ -1,9 +1,11 @@
+@use 'sass:math';
+
 @import '../variables';
 
 @if index($hamburger-animations, flatten) {
     .#{$hamburger-class-name}--flatten {
         span.bar {
-            transition: transform 0.3s / $hamburger-animation-speed $hamburger-easing;
+            transition: transform math.div(0.3s, $hamburger-animation-speed) $hamburger-easing;
         }
 
         &.#{$hamburger-active-class-name} {

scss/animations/_magnetic.scss

@@ -4,7 +4,7 @@
 @if index($hamburger-animations, magnetic) {
     .#{$hamburger-class-name}--magnetic {
         span.bar {
-            transition: transform 0.2s / $hamburger-animation-speed $hamburger-easing 0.2s / $hamburger-animation-speed;
+            transition: transform math.div(0.2s, $hamburger-animation-speed) $hamburger-easing math.div(0.2s, $hamburger-animation-speed);
 
             &:nth-child(1),
             &:nth-child(2) {
@@ -13,7 +13,7 @@
 
                 &::before {
                     @include hamburger-bar();
-                    transition: transform 0.4s / $hamburger-animation-speed $hamburger-easing;
+                    transition: transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing;
                 }
             }
 
@@ -32,14 +32,14 @@
 
         &.#{$hamburger-active-class-name} {
             span.bar {
-                transition: transform 0.2s / $hamburger-animation-speed $hamburger-easing;
+                transition: transform math.div(0.2s, $hamburger-animation-speed) $hamburger-easing;
 
                 &:nth-child(1),
                 &:nth-child(2) {
                     transform: translate3d(0, 0, 0);
 
                     &::before {
-                        transition: transform 0.4s / $hamburger-animation-speed $hamburger-easing;
+                        transition: transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing;
                     }
                 }
 

scss/animations/_minimal.scss

@@ -5,8 +5,8 @@
     .#{$hamburger-class-name}--minimal {
         span.bar {
             transition:
-                transform 0.4s / $hamburger-animation-speed $hamburger-easing,
-                opacity 0.3s / $hamburger-animation-speed $hamburger-easing 0.1s / $hamburger-animation-speed;
+                transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing,
+                opacity math.div(0.3s, $hamburger-animation-speed) $hamburger-easing math.div(0.1s, $hamburger-animation-speed);
 
             &:nth-child(1) {
                 top: round(-$hamburger-bar-spacing * 0.8);
@@ -24,8 +24,8 @@
         &.#{$hamburger-active-class-name} {
             span.bar {
                 transition:
-                    transform 0.4s / $hamburger-animation-speed $hamburger-easing,
-                    opacity 0.3s / $hamburger-animation-speed $hamburger-easing;
+                    transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing,
+                    opacity math.div(0.3s, $hamburger-animation-speed) $hamburger-easing;
 
                 &:nth-child(1) {
                     transform: translate3d(0, round($hamburger-bar-spacing * 0.8), 0);

scss/animations/_parallel.scss

@@ -6,8 +6,8 @@
         span.bar {
             transform: scaleX(1) translate3d(0, 0, 0);
             transition:
-                transform 0.2s / $hamburger-animation-speed $hamburger-easing,
-                top 0.2s / $hamburger-animation-speed $hamburger-easing;
+                transform math.div(0.2s, $hamburger-animation-speed) $hamburger-easing,
+                top math.div(0.2s, $hamburger-animation-speed) $hamburger-easing;
 
             &:nth-child(1) {
                 top: round(-$hamburger-bar-spacing * 0.8);
@@ -38,8 +38,8 @@
             span.bar {
                 top: 0;
                 transition:
-                    transform 0.3s / $hamburger-animation-speed $hamburger-easing,
-                    top 0.2s / $hamburger-animation-speed $hamburger-easing;
+                    transform math.div(0.3s, $hamburger-animation-speed) $hamburger-easing,
+                    top math.div(0.2s, $hamburger-animation-speed) $hamburger-easing;
 
                 &:nth-child(1) {
                     transform: rotate(-45deg);

scss/animations/_push.scss

@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 @import '../variables';
 
 @if index($hamburger-animations, push) {
     .#{$hamburger-class-name}--push {
         overflow: hidden;
 
         > .inner {
-            transition: transform 0.4s / $hamburger-animation-speed $hamburger-easing;
+            transition: transform math.div(0.4s, $hamburger-animation-speed) $hamburger-easing;
 
             &::before,
             &::after {