diff --git a/hypha/static_src/src/sass/apply/abstracts/_functions.scss b/hypha/static_src/src/sass/apply/abstracts/_functions.scss
index 604d90ef44728574ac325c511a412d25bf401048..686d2b953513e84cb47f2f416a37fe24c50018b6 100644
--- a/hypha/static_src/src/sass/apply/abstracts/_functions.scss
+++ b/hypha/static_src/src/sass/apply/abstracts/_functions.scss
@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 // Strip the unit from the given value and return the value
 @function strip-unit($value) {
-    @return $value / ($value * 0 + 1);
+    @return math.div($value, ($value * 0 + 1));
 }
 
 // Return an em unit based on the pixel value and context
 @function rem($px, $context: $base-font-size) {
-    @return #{strip-unit($px / strip-unit($context))}rem;
+    @return #{strip-unit(math.div($px, strip-unit($context)))}rem;
 }
 
 // Returns the opposite direction of each direction in a list
diff --git a/hypha/static_src/src/sass/apply/abstracts/_mixins.scss b/hypha/static_src/src/sass/apply/abstracts/_mixins.scss
index c76679e5627c0ede334a7701f0c4942470cf8e7c..f571da69b13d778a13eef4c8e92b65c071cb1c34 100644
--- a/hypha/static_src/src/sass/apply/abstracts/_mixins.scss
+++ b/hypha/static_src/src/sass/apply/abstracts/_mixins.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // Media queries
 @mixin media-query($queries...) {
     @each $query in $queries {
@@ -120,17 +122,17 @@
 @mixin responsive-font-sizes($min, $max) {
 
     $vw-context: (1260 * .1) * 1px;
-    $responsive: ($max / $vw-context) * 10vw;
+    $responsive: math.div($max, $vw-context) * 10vw;
 
-    $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+    $responsive-unitless: math.div($responsive, ($responsive - $responsive + 1));
     $dimension: if(unit($responsive) == 'vh', 'height', 'width');
-    $min-breakpoint: $min / $responsive-unitless * 100;
+    $min-breakpoint: math.div($min, $responsive-unitless) * 100;
 
     @media (max-#{$dimension}: #{$min-breakpoint}) {
         font-size: $min;
     }
 
-    $max-breakpoint: $max / $responsive-unitless * 100;
+    $max-breakpoint: math.div($max, $responsive-unitless) * 100;
 
     @media (min-#{$dimension}: #{$max-breakpoint}) {
         font-size: $max;
diff --git a/hypha/static_src/src/sass/apply/base/_typography.scss b/hypha/static_src/src/sass/apply/base/_typography.scss
index 8462c47b9b30c9975f6812ddf903e17880730a7a..f79778cbe0f35b6f65b3c35461900c810bba152e 100644
--- a/hypha/static_src/src/sass/apply/base/_typography.scss
+++ b/hypha/static_src/src/sass/apply/base/_typography.scss
@@ -1,8 +1,10 @@
+@use 'sass:math';
+
 // $TYPOGRAPHY
 // Base font
 html {
-    font-size: ($base-font-size / 16px) * 100%;
-    line-height: $base-line-height / $base-font-size;
+    font-size: math.div($base-font-size, 16px) * 100%;
+    line-height: math.div($base-line-height, $base-font-size);
     color: $color--default;
 }
 
diff --git a/hypha/static_src/src/sass/apply/components/_form.scss b/hypha/static_src/src/sass/apply/components/_form.scss
index 380e1aa42e1055bcfad49c899aa140ae2565755a..afacb6f7d1b6dfd86e6ac9ea00df8ee6aa26609a 100644
--- a/hypha/static_src/src/sass/apply/components/_form.scss
+++ b/hypha/static_src/src/sass/apply/components/_form.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .form {
     $root: &;
 
@@ -418,7 +420,7 @@
         padding: .4em;
         margin-bottom: 1em;
         border: 1px solid $color--mid-grey;
-        line-height: $base-line-height / $base-font-size;
+        line-height: math.div($base-line-height, $base-font-size);
 
         @include media-query(tablet-portrait) {
             max-width: 70%;
diff --git a/hypha/static_src/src/sass/public/abstracts/_functions.scss b/hypha/static_src/src/sass/public/abstracts/_functions.scss
index 604d90ef44728574ac325c511a412d25bf401048..686d2b953513e84cb47f2f416a37fe24c50018b6 100644
--- a/hypha/static_src/src/sass/public/abstracts/_functions.scss
+++ b/hypha/static_src/src/sass/public/abstracts/_functions.scss
@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 // Strip the unit from the given value and return the value
 @function strip-unit($value) {
-    @return $value / ($value * 0 + 1);
+    @return math.div($value, ($value * 0 + 1));
 }
 
 // Return an em unit based on the pixel value and context
 @function rem($px, $context: $base-font-size) {
-    @return #{strip-unit($px / strip-unit($context))}rem;
+    @return #{strip-unit(math.div($px, strip-unit($context)))}rem;
 }
 
 // Returns the opposite direction of each direction in a list
diff --git a/hypha/static_src/src/sass/public/abstracts/_mixins.scss b/hypha/static_src/src/sass/public/abstracts/_mixins.scss
index 405db5f958bd5a07466c568a70f264ecb48d999d..835535c872a38acb5b54a14c835f631e55bf3763 100644
--- a/hypha/static_src/src/sass/public/abstracts/_mixins.scss
+++ b/hypha/static_src/src/sass/public/abstracts/_mixins.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // Media queries
 @mixin media-query($queries...) {
     @each $query in $queries {
@@ -105,17 +107,17 @@
 @mixin responsive-font-sizes($min, $max) {
 
     $vw-context: (1260 * .1) * 1px;
-    $responsive: ($max / $vw-context) * 10vw;
+    $responsive: math.div($max, $vw-context) * 10vw;
 
-    $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+    $responsive-unitless: math.div($responsive, ($responsive - $responsive + 1));
     $dimension: if(unit($responsive) == 'vh', 'height', 'width');
-    $min-breakpoint: $min / $responsive-unitless * 100;
+    $min-breakpoint: math.div($min, $responsive-unitless) * 100;
 
     @media (max-#{$dimension}: #{$min-breakpoint}) {
         font-size: $min;
     }
 
-    $max-breakpoint: $max / $responsive-unitless * 100;
+    $max-breakpoint: math.div($max, $responsive-unitless) * 100;
 
     @media (min-#{$dimension}: #{$max-breakpoint}) {
         font-size: $max;
diff --git a/hypha/static_src/src/sass/public/base/_typography.scss b/hypha/static_src/src/sass/public/base/_typography.scss
index 8462c47b9b30c9975f6812ddf903e17880730a7a..f79778cbe0f35b6f65b3c35461900c810bba152e 100644
--- a/hypha/static_src/src/sass/public/base/_typography.scss
+++ b/hypha/static_src/src/sass/public/base/_typography.scss
@@ -1,8 +1,10 @@
+@use 'sass:math';
+
 // $TYPOGRAPHY
 // Base font
 html {
-    font-size: ($base-font-size / 16px) * 100%;
-    line-height: $base-line-height / $base-font-size;
+    font-size: math.div($base-font-size, 16px) * 100%;
+    line-height: math.div($base-line-height, $base-font-size);
     color: $color--default;
 }
 
diff --git a/hypha/static_src/src/sass/public/components/_form.scss b/hypha/static_src/src/sass/public/components/_form.scss
index 5f2859bdeb606c672ae71b7a305d339aa9963f45..06b1178a8b2dfa8953e1e11311d3539356466e4b 100644
--- a/hypha/static_src/src/sass/public/components/_form.scss
+++ b/hypha/static_src/src/sass/public/components/_form.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .form {
     &--header-search-desktop {
         max-width: 300px;
@@ -424,7 +426,7 @@
         width: 100%;
         padding: .4em;
         border: 1px solid $color--mid-grey;
-        line-height: $base-line-height / $base-font-size;
+        line-height: math.div($base-line-height, $base-font-size);
     }
 
     // Radio + Checkbox