diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index e8fc85824..82c1c7cfd 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .navbar {
   z-index: 2;
 
@@ -286,7 +288,7 @@
       }
 
       &.namespaces-lists {
-        padding-top: $navbar-padding / 2;
+        padding-top: math.div($navbar-padding, 2);
       }
 
       &.loader-container.is-loading:after {
@@ -303,7 +305,7 @@
     }
 
     .top-menu {
-      margin-top: $navbar-padding / 2;
+      margin-top: math.div($navbar-padding, 2);
 
       .menu-list {
         li {
diff --git a/src/styles/theme/variables-derived.scss b/src/styles/theme/variables-derived.scss
index df99a3d25..4d98e8476 100644
--- a/src/styles/theme/variables-derived.scss
+++ b/src/styles/theme/variables-derived.scss
@@ -1,2 +1,4 @@
+@use "sass:math";
+
 // Variables that are derived from bulma variables need to be included after them
-$mobile: $tablet / 2;
+$mobile: math.div($tablet, 2);