diff --git a/docs/_sass/common/_reset.scss b/docs/_sass/common/_reset.scss
index b7657d344d..ef903ed0eb 100644
--- a/docs/_sass/common/_reset.scss
+++ b/docs/_sass/common/_reset.scss
@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 @mixin block-elements {
   h1, h2, h3, h4, h5, h6, p,
   hr, blockquote, figure, pre, .highlighter-rouge,
@@ -33,7 +35,7 @@ html {
 body {
   padding: 0;
   margin: 0;
-  font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family);
+  font: map-get($base, font-weight) list.slash(map-get($base, font-size), map-get($base, line-height)) map-get($base, font-family);
   ::-moz-selection {
     background: $select-color;
   }
@@ -51,7 +53,7 @@ body {
 }
 
 input, textarea, select, button {
-  font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family);
+  font: map-get($base, font-weight) list.slash(map-get($base, font-size), map-get($base, line-height)) map-get($base, font-family);
   color: $text-color;
 }
 
diff --git a/docs/_sass/common/_variables.scss b/docs/_sass/common/_variables.scss
index 848a7371ba..8519a404df 100644
--- a/docs/_sass/common/_variables.scss
+++ b/docs/_sass/common/_variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $base: (
   font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
   font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),
@@ -114,16 +116,16 @@ $button-height-sm:        1.5rem;
 $button-height-xs:        1.2rem;
 
 $button: (
-  padding-y-xl:           ($button-height-xl - map-get($base, font-size-xl)) / 2,
-  padding-x-xl:           $button-height-xl / 3,
-  padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
-  padding-x-lg:           $button-height-lg / 3,
-  padding-y:              ($button-height - map-get($base, font-size)) / 2,
-  padding-x:              $button-height / 3,
-  padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
-  padding-x-sm:           $button-height-sm / 3,
-  padding-y-xs:           ($button-height-xs - map-get($base, font-size-xs)) / 2,
-  padding-x-xs:           $button-height-xs / 3,
+  padding-y-xl:           math.div($button-height-xl - map-get($base, font-size-xl), 2),
+  padding-x-xl:           math.div($button-height-xl, 3),
+  padding-y-lg:           math.div($button-height-lg - map-get($base, font-size-lg), 2),
+  padding-x-lg:           math.div($button-height-lg, 3),
+  padding-y:              math.div($button-height - map-get($base, font-size), 2),
+  padding-x:              math.div($button-height, 3),
+  padding-y-sm:           math.div($button-height-sm - map-get($base, font-size-sm), 2),
+  padding-x-sm:           math.div($button-height-sm, 3),
+  padding-y-xs:           math.div($button-height-xs - map-get($base, font-size-xs), 2),
+  padding-x-xs:           math.div($button-height-xs, 3),
 
   pill-radius:            6rem,
 
diff --git a/docs/_sass/common/classes/_grid.scss b/docs/_sass/common/classes/_grid.scss
index 770b1a6ae2..15047d0320 100644
--- a/docs/_sass/common/classes/_grid.scss
+++ b/docs/_sass/common/classes/_grid.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $grid-columns: 12;
 
 .grid-container {
@@ -18,7 +20,7 @@ $grid-columns: 12;
     @include flex(1);
   } @else {
     @include flex(none);
-    width: percentage($columns / $grid-columns);
+    width: percentage(math.div($columns, $grid-columns));
   }
 }
 
diff --git a/docs/_sass/common/components/_toc.scss b/docs/_sass/common/components/_toc.scss
index 15a13ac821..6ba7f6fc8b 100644
--- a/docs/_sass/common/components/_toc.scss
+++ b/docs/_sass/common/components/_toc.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 ul.toc {
   display: block;
   margin: 0;
@@ -13,7 +15,7 @@ ul.toc {
   }
   a {
     display: inline-block;
-    margin: map-get($spacers, 1) / 4 0;
+    margin: math.div(map-get($spacers, 1), 4) 0;
     text-decoration: none !important;
     @include link-colors($text-color, $main-color-1);
   }
diff --git a/docs/_sass/components/_extensions.scss b/docs/_sass/components/_extensions.scss
index 71aae5840f..b410ed1e1e 100644
--- a/docs/_sass/components/_extensions.scss
+++ b/docs/_sass/components/_extensions.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .extensions {
   margin: map-get($spacers, 3) 0;
   @extend .d-print-none;
@@ -17,16 +19,16 @@
 }
 
 .extensions--video {
-  padding-top: percentage(315 / 560);
+  padding-top: percentage(math.div(315, 560));
 }
 
 .extensions--slide {
-  padding-top: percentage(487 / 599);
+  padding-top: percentage(math.div(487, 599));
 }
 
 .extensions--demo {
   min-height: 340px;
-  padding-top: percentage(315 / 560);
+  padding-top: percentage(math.div(315, 560));
 }
 
 .extensions--audio {