diff --git a/aio/src/styles/2-modules/cookies-popup/_cookies-popup.scss b/aio/src/styles/2-modules/cookies-popup/_cookies-popup.scss
index a7ee2675f7..912e475007 100644
--- a/aio/src/styles/2-modules/cookies-popup/_cookies-popup.scss
+++ b/aio/src/styles/2-modules/cookies-popup/_cookies-popup.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '~@angular/cdk' as cdk;
 @use '~@angular/material' as mat;
 
@@ -12,13 +13,13 @@ aio-cookies-popup {
     position: fixed;
     margin: 24px;
     max-width: 430px;
-    padding: $inner-spacing $inner-spacing $inner-spacing / 2;
+    padding: $inner-spacing $inner-spacing math.div($inner-spacing, 2);
     z-index: cdk.$overlay-container-z-index + 1;
 
     .actions {
       display: flex;
       justify-content: flex-end;
-      margin: $inner-spacing $inner-spacing / -2 0 0;
+      margin: $inner-spacing math.div($inner-spacing, -2) 0 0;
 
       .mat-button {
         text-transform: uppercase;
diff --git a/aio/src/styles/2-modules/toc/_toc.scss b/aio/src/styles/2-modules/toc/_toc.scss
index 69aced4f2d..605592ce5c 100644
--- a/aio/src/styles/2-modules/toc/_toc.scss
+++ b/aio/src/styles/2-modules/toc/_toc.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../../mixins';
 
 $tocItemLineHeight: 24;
@@ -9,10 +10,10 @@ $tocMarkerSize: 6;
   border-radius: 50%;
   content: "";
   height: #{$tocMarkerSize}px;
-  left: -#{($tocMarkerSize - $tocMarkerRailSize) / 2}px;
+  left: -#{math.div($tocMarkerSize - $tocMarkerRailSize, 2)}px;
   position: absolute;
-  top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px);
-  top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px);
+  top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px - #{math.div($tocMarkerSize, 2)}px);
+  top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem - #{math.div($tocMarkerSize, 2)}px);
   width: #{$tocMarkerSize}px;
 }
 
@@ -158,13 +159,13 @@ aio-toc {
         }
 
         &:first-child:before {
-          top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px - #{$tocMarkerSize / 2}px);
-          top: calc(#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem - #{$tocMarkerSize / 2}px);
+          top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px - #{math.div($tocMarkerSize, 2)}px);
+          top: calc(#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem - #{math.div($tocMarkerSize, 2)}px);
         }
 
         &:last-child:before {
-          bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2}px + #{$tocMarkerSize / 2}px));
-          bottom: calc(100% - (#{$tocItemTopPadding}px + #{$tocItemLineHeight / 2 / 10}rem + #{$tocMarkerSize / 2}px));
+          bottom: calc(100% - (#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2)}px + #{math.div($tocMarkerSize, 2)}px));
+          bottom: calc(100% - (#{$tocItemTopPadding}px + #{math.div($tocItemLineHeight, 2 * 10)}rem + #{math.div($tocMarkerSize, 2)}px));
         }
 
         &:not(.active):hover {
diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss
index d56491d76f..f5a10a1048 100644
--- a/aio/src/styles/_mixins.scss
+++ b/aio/src/styles/_mixins.scss
@@ -1,21 +1,22 @@
 @use 'sass:list';
+@use 'sass:math';
 @use 'sass:selector';
 @use './constants';
 
 // REM Font Adjustments
 @mixin font-size($sizeValue) {
   font-size: ($sizeValue) + px;
-  font-size: ($sizeValue / 10) + rem;
+  font-size: math.div($sizeValue, 10) + rem;
 }
 
 @mixin letter-spacing($spacingValue) {
   letter-spacing: ($spacingValue) + px;
-  letter-spacing: ($spacingValue / 10) + rem;
+  letter-spacing: math.div($spacingValue, 10) + rem;
 }
 
 @mixin line-height($heightValue) {
   line-height: ($heightValue) + px;
-  line-height: ($heightValue / 10) + rem;
+  line-height: math.div($heightValue, 10) + rem;
 }
 
 // PLACEHOLDER