diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
index dc5ffd9..f10cec3 100644
--- a/dev/scss/base/flextable.scss
+++ b/dev/scss/base/flextable.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import "lengths";
 @import "mixins";
 
@@ -20,7 +21,7 @@
     flex-direction: row;
     text-align: center;
     width: 100%;
-    border-width: $border-size / 2;
+    border-width: math.div($border-size,2);
     border-style: solid;
     align-items: stretch;
     > * {
diff --git a/dev/scss/base/lengths.scss b/dev/scss/base/lengths.scss
index 9dd307d..c4a7e5a 100644
--- a/dev/scss/base/lengths.scss
+++ b/dev/scss/base/lengths.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /*
  * Defined lengths and sizes for the
  * Kalamar layout.
@@ -17,6 +19,6 @@
  */
 $standard-margin:     40px;
 $right-distance:      $standard-margin;
-$right-view-distance: $standard-margin / 2;
+$right-view-distance: math.div($standard-margin,2);
 $logo-left-distance:  230px;
-$footer-height:       100pt;
\ No newline at end of file
+$footer-height:       100pt;
diff --git a/dev/scss/base/mixins.scss b/dev/scss/base/mixins.scss
index 599c19a..88eaaae 100644
--- a/dev/scss/base/mixins.scss
+++ b/dev/scss/base/mixins.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import "colors";
 
 /**
@@ -64,5 +65,5 @@
 
 @mixin matchinfo-head {
   border-top: $border-size solid $darker-orange; // #ff8000;
-  width:      $left-width / 2;
+  width:      math.div($left-width, 2);
 }