From 7adfca3f44edf094f8dec99124901e12aa70e86b Mon Sep 17 00:00:00 2001
From: Rafael dos Santos Silva <xfalcox@gmail.com>
Date: Tue, 7 Feb 2023 15:05:47 -0300
Subject: [PATCH] DEV: Dart Sass  deprecation

---
 scss/_variables.scss                  | 18 ++++---
 scss/common/_admin.scss               | 22 ++++----
 scss/common/_badge.scss               | 26 ++++-----
 scss/common/_base.scss                |  8 +--
 scss/common/_cooked-aside.scss        | 24 ++++-----
 scss/common/_cooked.scss              |  4 +-
 scss/common/_dashboard.scss           | 20 +++----
 scss/common/_form-auto-complete.scss  | 14 ++---
 scss/common/_form-color-picker.scss   |  2 +-
 scss/common/_form-d-editor.scss       | 18 ++++---
 scss/common/_form.scss                |  8 +--
 scss/common/_header.scss              |  8 +--
 scss/common/_lightbox.scss            | 10 ++--
 scss/common/_login.scss               |  2 +-
 scss/common/_material-icons.scss      |  4 +-
 scss/common/_menu-panel.scss          | 24 ++++-----
 scss/common/_modal.scss               | 24 ++++-----
 scss/common/_notification.scss        |  4 +-
 scss/common/_picker.scss              |  2 +-
 scss/common/_reply.scss               | 38 ++++++-------
 scss/common/_search.scss              |  8 +--
 scss/common/_share.scss               | 10 ++--
 scss/common/_topic-list-category.scss |  8 +--
 scss/common/_topic-list.scss          | 16 +++---
 scss/common/_topic-post.scss          | 78 ++++++++++++++-------------
 scss/common/_user-badge.scss          | 16 +++---
 scss/common/_user-card.scss           | 18 ++++---
 scss/common/_user.scss                | 36 +++++++------
 scss/mixins/_button.scss              |  6 +--
 scss/mixins/_material-icons.scss      | 10 ++--
 scss/mobile/_admin.scss               |  6 +--
 scss/mobile/_base-override.scss       |  2 +-
 scss/mobile/_login.scss               |  2 +-
 scss/mobile/_reply.scss               |  6 +--
 scss/mobile/_topic-list.scss          |  4 +-
 scss/mobile/_topic-post.scss          |  4 +-
 scss/mobile/_user.scss                |  6 +--
 37 files changed, 273 insertions(+), 243 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 53592fa..f353039 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,5 +1,7 @@
 // Colour chooser functions
 
+@use "sass:math";
+
 @function color-chooser($dark, $light) {
   @return unquote('color-chooser(') + $dark + unquote(', ') + $light + unquote(')');
 }
@@ -144,7 +146,7 @@ $font-size-h6:        14px !default;
 $font-size-body:      14px !default;
 $font-size-caption:   12px !default;
 
-$font-size-sm:        percentage($font-size-caption / $font-size-body) !default;
+$font-size-sm:        percentage(math.div($font-size-caption, $font-size-body)) !default;
 
 $material-icon-size:  24px !default;
 
@@ -231,9 +233,9 @@ $btn-line-height:          1 !default;
 $btn-padding-x:            $spacer !default;
 $btn-padding-x-lg:         $spacer !default;
 $btn-padding-x-sm:         $spacer !default;
-$btn-padding-y:            (($btn-height - $btn-font-size * $btn-line-height) / 2) !default;
-$btn-padding-y-lg:         (($btn-height-lg - $btn-font-size-lg * $btn-line-height) / 2) !default;
-$btn-padding-y-sm:         (($btn-height-sm - $btn-font-size-sm * $btn-line-height) / 2) !default;
+$btn-padding-y:            (($btn-height - $btn-font-size * $btn-line-height) * 0.5) !default;
+$btn-padding-y-lg:         (($btn-height-lg - $btn-font-size-lg * $btn-line-height) * 0.5) !default;
+$btn-padding-y-sm:         (($btn-height-sm - $btn-font-size-sm * $btn-line-height) * 0.5) !default;
 
 
 
@@ -268,7 +270,7 @@ $chip-icon-color-light: $black-secondary !default;
 $chip-inner-spacer-x:   $spacer-x-inline !default;
 $chip-line-height:      $line-height-base !default;
 $chip-padding-x:        $spacer !default;
-$chip-padding-y:        (($chip-height - $chip-font-size * $chip-line-height) / 2) !default;
+$chip-padding-y:        (($chip-height - $chip-font-size * $chip-line-height) * 0.5) !default;
 $chip-sm-scale:         .75 !default;
 
 
@@ -303,7 +305,7 @@ $dropdown-link-bg-hover-dark:  $white-divider !default;
 $dropdown-link-bg-hover-light: $black-divider !default;
 $dropdown-link-height:         $control-height-sm !default;
 $dropdown-link-padding-x:      $spacer-lg !default;
-$dropdown-link-padding-y:      (($dropdown-link-height - $dropdown-font-size * $dropdown-line-height) / 2) !default;
+$dropdown-link-padding-y:      (($dropdown-link-height - $dropdown-font-size * $dropdown-line-height) * 0.5) !default;
 $dropdown-padding-x:           0 !default;
 $dropdown-padding-y:           $spacer !default;
 
@@ -373,7 +375,7 @@ $nav-link-line-height:    1 !default;
 $nav-link-opacity:        .7 !default;
 $nav-link-opacity-active: 1 !default;
 $nav-link-padding-x:      $spacer !default;
-$nav-link-padding-y:      (($control-height - $nav-link-font-size * $nav-link-line-height) / 2) !default;
+$nav-link-padding-y:      (($control-height - $nav-link-font-size * $nav-link-line-height) * 0.5) !default;
 $nav-item-spacer-x:       1px !default;
 $nav-item-spacer-y:       1px !default;
 
@@ -456,4 +458,4 @@ $text-field-line-height:                 1.5 !default;
 $text-field-margin-y:                    $spacer-y-inline !default;
 $text-field-min-width:                   200px !default;
 $text-field-padding-x:                   12px !default;
-$text-field-padding-y:                   (($text-field-height - $text-field-border-width * 2 - $text-field-font-size * $text-field-line-height) / 2) !default;
+$text-field-padding-y:                   (($text-field-height - $text-field-border-width * 2 - $text-field-font-size * $text-field-line-height) * 0.5) !default;
diff --git a/scss/common/_admin.scss b/scss/common/_admin.scss
index 557d294..b2d0b81 100644
--- a/scss/common/_admin.scss
+++ b/scss/common/_admin.scss
@@ -103,7 +103,7 @@ table {
   margin-bottom: $spacer-y;
 
   button {
-    margin-right: ($card-inner-spacer-x / 2);
+    margin-right: ($card-inner-spacer-x * 0.5);
   }
 
   label {
@@ -183,7 +183,7 @@ table {
         margin-left: auto;
 
         &:not(:first-child) {
-          padding-left: ($card-inner-spacer-x / 2 - $nav-item-spacer-x);
+          padding-left: ($card-inner-spacer-x * 0.5 - $nav-item-spacer-x);
         }
       }
     }
@@ -442,7 +442,7 @@ table {
       .components-list {
         @include typography-caption;
 
-        margin-top: ($spacer-y-inline / 2);
+        margin-top: ($spacer-y-inline * 0.5);
       }
 
       .info {
@@ -556,7 +556,7 @@ table {
   }
 
   .external-link {
-    margin-bottom: ($spacer-y / 2);
+    margin-bottom: ($spacer-y * 0.5);
 
     &:last-child {
       margin-bottom: 0;
@@ -913,7 +913,7 @@ table {
   }
 
   .close {
-    margin-top: (($font-size-h4 * $line-height-h4 - $font-size-base * $line-height-base) / 2);
+    margin-top: (($font-size-h4 * $line-height-h4 - $font-size-base * $line-height-base) * 0.5);
   }
 
   .inline-spinner {
@@ -1246,11 +1246,11 @@ table {
 .staff-action-logs-controls {
   a {
     &.filter {
-      border-radius: ($chip-height / 2);
+      border-radius: ($chip-height * 0.5);
       font-size: $chip-font-size;
       line-height: 1;
-      margin-top: ($spacer-y-inline / 2);
-      margin-bottom: ($spacer-y-inline / 2);
+      margin-top: ($spacer-y-inline * 0.5);
+      margin-bottom: ($spacer-y-inline * 0.5);
       padding: $chip-padding-y $chip-padding-x;
 
       i {
@@ -1374,7 +1374,7 @@ table {
     }
 
     &.topic-map-examples .topic-map {
-      margin-top: ($btn-height + $card-inner-spacer-y / 2);
+      margin-top: ($btn-height + $card-inner-spacer-y * 0.5);
     }
 
     .section-description {
@@ -1394,7 +1394,7 @@ table {
 
         border-bottom-color: color-chooser($white-divider, $black-divider);
         margin-bottom: 0;
-        padding: ($card-padding-y / 2) $card-padding-x;
+        padding: ($card-padding-y * 0.5) $card-padding-x;
       }
 
       .rendered {
@@ -1531,7 +1531,7 @@ table {
 
 .watched-word-box {
   background-color: color-chooser($chip-bg-dark, $chip-bg-light);
-  border-radius: ($chip-height / 2);
+  border-radius: ($chip-height * 0.5);
   color: inherit;
   font-size: $font-size-sm;
   margin-right: $spacer-x-inline;
diff --git a/scss/common/_badge.scss b/scss/common/_badge.scss
index 9abecfe..d0ffd75 100644
--- a/scss/common/_badge.scss
+++ b/scss/common/_badge.scss
@@ -33,7 +33,7 @@
 
       .btn {
         flex-shrink: 0;
-        margin-left: ($spacer-x / 2);
+        margin-left: ($spacer-x * 0.5);
       }
     }
   }
@@ -42,7 +42,7 @@
 .badge-group,
 .badge-notification {
   align-items: center;
-  border-radius: ($font-size-base * $line-height-base / 2);
+  border-radius: ($font-size-base * $line-height-base * 0.5);
   display: inline-flex;
   font-size: $font-size-sm;
   justify-content: center;
@@ -72,7 +72,7 @@
   &.bar {
     align-items: center;
     background-color: color-chooser($chip-bg-dark, $chip-bg-light);
-    border-radius: ($chip-height / 2);
+    border-radius: ($chip-height * 0.5);
     font-size: $chip-font-size;
     line-height: $chip-line-height;
     margin-right: $spacer-x-inline;
@@ -101,7 +101,7 @@
   }
 
   &.box {
-    border-radius: ($chip-height / 2);
+    border-radius: ($chip-height * 0.5);
     font-size: $chip-font-size;
     line-height: $chip-line-height;
     margin-right: $spacer-x-inline;
@@ -109,17 +109,17 @@
 
     .badge-category {
       align-items: center;
-      border-radius: ($chip-height / 2);
+      border-radius: ($chip-height * 0.5);
       min-height: $chip-height;
       padding: $chip-padding-y $chip-padding-x;
     }
 
     .badge-category-bg {
-      border-radius: ($chip-height / 2);
+      border-radius: ($chip-height * 0.5);
     }
 
     .badge-category-parent-bg {
-      border-radius: ($chip-height / 2);
+      border-radius: ($chip-height * 0.5);
       width: calc(100% - #{$chip-inner-spacer-x});
 
       + .badge-category-bg {
@@ -140,7 +140,7 @@
   &.bullet {
     align-items: center;
     background-color: color-chooser($chip-bg-dark, $chip-bg-light);
-    border-radius: ($chip-height / 2);
+    border-radius: ($chip-height * 0.5);
     font-size: $chip-font-size;
     line-height: $line-height-base;
     margin-right: $spacer-x-inline;
@@ -149,7 +149,7 @@
 
     .badge-category {
       align-items: center;
-      border-radius: ($chip-height / 2);
+      border-radius: ($chip-height * 0.5);
       min-height: $chip-height;
       padding: $chip-padding-y 0 $chip-padding-y $chip-inner-spacer-x;
     }
@@ -162,13 +162,13 @@
     }
 
     .badge-category-parent-bg {
-      border-radius: ($material-icon-size / 2) 0 0 ($material-icon-size / 2);
+      border-radius: ($material-icon-size * 0.5) 0 0 ($material-icon-size * 0.5);
       height: $material-icon-size;
-      width: ($material-icon-size / 2);
+      width: ($material-icon-size * 0.5);
 
       + .badge-category-bg {
-        border-radius: 0 ($material-icon-size / 2) ($material-icon-size / 2) 0;
-        width: ($material-icon-size / 2);
+        border-radius: 0 ($material-icon-size * 0.5) ($material-icon-size * 0.5) 0;
+        width: ($material-icon-size * 0.5);
       }
     }
   }
diff --git a/scss/common/_base.scss b/scss/common/_base.scss
index c4fd91b..9221abf 100644
--- a/scss/common/_base.scss
+++ b/scss/common/_base.scss
@@ -65,13 +65,13 @@ blockquote {
   }
 
   &::after {
-    right: ($material-icon-size / 2);
-    bottom: ($material-icon-size / 2);
+    right: ($material-icon-size * 0.5);
+    bottom: ($material-icon-size * 0.5);
   }
 
   &::before {
-    top: ($material-icon-size / 2);
-    left: ($material-icon-size / 2);
+    top: ($material-icon-size * 0.5);
+    left: ($material-icon-size * 0.5);
     transform: rotate(180deg);
   }
 }
diff --git a/scss/common/_cooked-aside.scss b/scss/common/_cooked-aside.scss
index 37c3461..d22f781 100644
--- a/scss/common/_cooked-aside.scss
+++ b/scss/common/_cooked-aside.scss
@@ -31,7 +31,7 @@ aside {
     }
 
     header {
-      margin-bottom: ($card-inner-spacer-y / 2);
+      margin-bottom: ($card-inner-spacer-y * 0.5);
     }
 
     + .onebox {
@@ -53,7 +53,7 @@ aside {
       h4 {
         @include typography-h5;
 
-        margin-bottom: ($card-inner-spacer-y / 2);
+        margin-bottom: ($card-inner-spacer-y * 0.5);
         overflow: hidden;
       }
 
@@ -74,14 +74,14 @@ aside {
       }
 
       .aspect-image {
-        margin-top: (($font-size-h5 * $line-height-h5 - $font-size-h5) / 2);
+        margin-top: (($font-size-h5 * $line-height-h5 - $font-size-h5) * 0.5);
         margin-right: ($card-inner-spacer-x * 2);
-        margin-bottom: ($card-inner-spacer-y / 2);
+        margin-bottom: ($card-inner-spacer-y * 0.5);
         width: ($card-padding-x * 6);
       }
 
       .date {
-        margin-bottom: ($card-inner-spacer-y / 2);
+        margin-bottom: ($card-inner-spacer-y * 0.5);
         overflow: hidden;
 
         &,
@@ -102,9 +102,9 @@ aside {
       .onebox-avatar {
         border-radius: 50%;
         height: $card-avatar-size;
-        margin-top: ($card-inner-spacer-y / 4);
+        margin-top: ($card-inner-spacer-y * 0.25);
         margin-right: $card-inner-spacer-x;
-        margin-bottom: ($card-inner-spacer-y / 4);
+        margin-bottom: ($card-inner-spacer-y * 0.25);
         width: $card-avatar-size;
       }
     }
@@ -230,7 +230,7 @@ div {
 
     .poll-buttons {
       border-top-color: color-chooser($table-border-color-dark, $table-border-color-light);
-      padding: ($card-padding-y / 2) ($card-padding-x - $card-inner-spacer-x);
+      padding: ($card-padding-y * 0.5) ($card-padding-x - $card-inner-spacer-x);
 
       a {
         @include btn-base;
@@ -286,13 +286,13 @@ div {
 
       li {
         display: block;
-        margin-right: ($card-inner-spacer-x / 2);
+        margin-right: ($card-inner-spacer-x * 0.5);
         margin-bottom: 0;
       }
     }
 
     .poll-voters-list {
-      margin-top: ($card-inner-spacer-y / 4);
+      margin-top: ($card-inner-spacer-y * 0.25);
     }
 
     .results {
@@ -337,7 +337,7 @@ div {
       }
 
       .option {
-        margin-bottom: ($card-inner-spacer-y / 4);
+        margin-bottom: ($card-inner-spacer-y * 0.25);
         padding-bottom: 0;
       }
     }
@@ -348,7 +348,7 @@ div {
   &.gfycat,
   &.whitelistedgeneric {
     .site-icon {
-      margin-right: ($card-inner-spacer-x / 2);
+      margin-right: ($card-inner-spacer-x * 0.5);
       vertical-align: text-top;
     }
   }
diff --git a/scss/common/_cooked.scss b/scss/common/_cooked.scss
index 144d107..ea1ff83 100644
--- a/scss/common/_cooked.scss
+++ b/scss/common/_cooked.scss
@@ -17,7 +17,7 @@
   h4,
   h5,
   h6 {
-    margin: 0 0 ($card-inner-spacer-y / 2);
+    margin: 0 0 ($card-inner-spacer-y * 0.5);
   }
 
   h1 {
@@ -127,7 +127,7 @@
   h4,
   h5,
   h6 {
-    margin: 0 0 ($card-inner-spacer-y / 2);
+    margin: 0 0 ($card-inner-spacer-y * 0.5);
   }
 
   h1 {
diff --git a/scss/common/_dashboard.scss b/scss/common/_dashboard.scss
index 97035fb..05a02a1 100644
--- a/scss/common/_dashboard.scss
+++ b/scss/common/_dashboard.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .activity-metrics {
   @include card;
 
@@ -150,7 +152,7 @@
       .sort-btn {
         font-size: $btn-font-size-sm;
         margin-right: $spacer-x-inline;
-        padding: $btn-padding-y-sm ($card-inner-spacer-x / 2);
+        padding: $btn-padding-y-sm ($card-inner-spacer-x * 0.5);
       }
     }
   }
@@ -326,14 +328,14 @@
   }
 
   .section-columns .section-column {
-    width: calc(50% - #{$spacer-x / 2});
+    width: calc(50% - #{$spacer-x * 0.5});
 
     &:first-child {
-      margin-right: ($spacer-x / 2);
+      margin-right: ($spacer-x * 0.5);
     }
 
     &:last-child {
-      margin-left: ($spacer-x / 2);
+      margin-left: ($spacer-x * 0.5);
     }
   }
 
@@ -363,7 +365,7 @@
     @include card;
 
     flex-basis: calc(100% / 3 - #{$spacer-x});
-    margin: 0 ($spacer-x / 2) $spacer-y;
+    margin: 0 ($spacer-x * 0.5) $spacer-y;
     padding: 0;
     transition-duration: $transition-duration;
     transition-timing-function: $transition-timing-function;
@@ -384,8 +386,8 @@
   }
 
   .reports-list {
-    margin-right: ($spacer-x / -2);
-    margin-left: ($spacer-x / -2);
+    margin-right: math.div($spacer-x, -2);
+    margin-left: math.div($spacer-x, -2);
   }
 }
 
@@ -442,11 +444,11 @@
   margin-bottom: $spacer-y;
 
   .table-cell {
-    border-radius: ($chip-height / 2);
+    border-radius: ($chip-height * 0.5);
     margin: 0 $spacer-x-inline $spacer-y-inline 0;
 
     .label {
-      border-radius: ($chip-height / 2 - 1) 0 0 ($chip-height / 2 - 1);
+      border-radius: ($chip-height * 0.5 - 1) 0 0 ($chip-height * 0.5 - 1);
       font-size: $chip-font-size;
       line-height: $line-height-base;
       padding: ($chip-padding-y - 1) $chip-padding-x;
diff --git a/scss/common/_form-auto-complete.scss b/scss/common/_form-auto-complete.scss
index 7c1c022..6fd8b9d 100644
--- a/scss/common/_form-auto-complete.scss
+++ b/scss/common/_form-auto-complete.scss
@@ -6,12 +6,12 @@ div {
     border-radius: $text-field-border-radius;
     min-height: $text-field-height;
     min-width: $text-field-min-width;
-    padding: (($text-field-height - $text-field-border-width * 2 - ($chip-height + $spacer-xs)) / 2) $text-field-padding-x;
+    padding: (($text-field-height - $text-field-border-width * 2 - ($chip-height + $spacer-xs)) * 0.5) $text-field-padding-x;
     padding-right: ($text-field-padding-x - $spacer-xs);
 
     &:hover {
       border-width: ($text-field-border-width * 2);
-      padding: (($text-field-height - $text-field-border-width * 2 - ($chip-height + $spacer-xs)) / 2 - $text-field-border-width) ($text-field-padding-x - $text-field-border-width);
+      padding: (($text-field-height - $text-field-border-width * 2 - ($chip-height + $spacer-xs)) * 0.5 - $text-field-border-width) ($text-field-padding-x - $text-field-border-width);
       padding-right: ($text-field-padding-x - $spacer-xs - $text-field-border-width);
     }
 
@@ -19,7 +19,7 @@ div {
       &.item {
         align-items: center;
         background-color: color-chooser($chip-bg-dark, $chip-bg-light);
-        border-radius: ($chip-height / 2);
+        border-radius: ($chip-height * 0.5);
         color: inherit;
         display: flex;
         flex-shrink: 0;
@@ -27,9 +27,9 @@ div {
         font-weight: normal;
         height: $chip-height;
         line-height: 1;
-        margin-top: ($spacer-xs / 2);
+        margin-top: ($spacer-xs * 0.5);
         margin-right: $spacer-xs;
-        margin-bottom: ($spacer-xs / 2);
+        margin-bottom: ($spacer-xs * 0.5);
         padding: 0 $chip-padding-x;
 
         a {
@@ -113,7 +113,7 @@ div {
           @include typography-caption;
 
           color: color-chooser($white-secondary, $black-secondary);
-          margin-left: ($dropdown-inner-spacer-x / 2);
+          margin-left: ($dropdown-inner-spacer-x * 0.5);
         }
 
         &.username {
@@ -124,7 +124,7 @@ div {
 
       .avatar {
         flex-shrink: 0;
-        margin-right: ($dropdown-inner-spacer-x / 2);
+        margin-right: ($dropdown-inner-spacer-x * 0.5);
       }
     }
   }
diff --git a/scss/common/_form-color-picker.scss b/scss/common/_form-color-picker.scss
index b51f86c..62fbc62 100644
--- a/scss/common/_form-color-picker.scss
+++ b/scss/common/_form-color-picker.scss
@@ -12,7 +12,7 @@
     flex-wrap: wrap;
     justify-content: flex-end;
     margin: ($spacer-xs * -1) ($spacer-xs * -1) 0 $spacer;
-    min-width: ($spacer-xs * 2 + (($text-field-height - $spacer-xs) / 2) * 2);
+    min-width: ($spacer-xs * 2 + (($text-field-height - $spacer-xs) * 0.5) * 2);
     padding: 0;
 
     .colorpicker {
diff --git a/scss/common/_form-d-editor.scss b/scss/common/_form-d-editor.scss
index 3b42768..13e956a 100644
--- a/scss/common/_form-d-editor.scss
+++ b/scss/common/_form-d-editor.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .d-editor {
   border: 0;
 
@@ -32,7 +34,7 @@
       margin-left: ($card-inner-spacer-x * -1);
 
       &:last-child {
-        margin-bottom: ($card-inner-spacer-y / -2);
+        margin-bottom: math.div($card-inner-spacer-y, -2);
       }
 
       .btn {
@@ -49,7 +51,7 @@
   flex-wrap: wrap;
   margin: 0;
   min-height: 0;
-  padding: ($card-inner-spacer-y / 2) ($card-inner-spacer-x / 2);
+  padding: ($card-inner-spacer-y * 0.5) ($card-inner-spacer-x * 0.5);
 
   .btn {
     @include btn-footer;
@@ -67,11 +69,11 @@
   .d-editor-spacer {
     height: $btn-height;
     margin-right: 0;
-    margin-left: ($card-inner-spacer-x / 2);
+    margin-left: ($card-inner-spacer-x * 0.5);
   }
 
   .dropdown-select-box {
-    margin-left: ($card-inner-spacer-x / 2);
+    margin-left: ($card-inner-spacer-x * 0.5);
 
     &:first-child {
       margin-left: 0;
@@ -87,10 +89,10 @@
   }
 
   .d-editor-button-bar ~ & {
-    padding-top: ($card-inner-spacer-y / 2);
+    padding-top: ($card-inner-spacer-y * 0.5);
 
     @include focus-hover {
-      padding-top: ($card-inner-spacer-y / 2);
+      padding-top: ($card-inner-spacer-y * 0.5);
     }
   }
 }
@@ -121,7 +123,7 @@
 .d-editor-preview-wrapper {
   background-color: color-chooser($text-field-bg-dark, $text-field-bg-light);
   margin-left: $card-padding-x;
-  max-width: calc(50% - #{$card-padding-x / 2});
+  max-width: calc(50% - #{$card-padding-x * 0.5});
 
   .edit-title & {
     margin-top: (($card-inner-spacer-y + $text-field-height) * -1);
@@ -135,7 +137,7 @@
 .d-editor-spacer {
   background-color: color-chooser($white-divider, $black-divider);
   height: $btn-height;
-  margin: 0 ($card-inner-spacer-x / 2);
+  margin: 0 ($card-inner-spacer-x * 0.5);
 }
 
 .d-editor-textarea-wrapper {
diff --git a/scss/common/_form.scss b/scss/common/_form.scss
index 573a9ab..6997443 100644
--- a/scss/common/_form.scss
+++ b/scss/common/_form.scss
@@ -9,7 +9,7 @@ form {
 
 input[type="checkbox"],
 input[type="radio"] {
-  margin-top: (($font-size-base * $line-height-base - $font-size-base) / 2);
+  margin-top: (($font-size-base * $line-height-base - $font-size-base) * 0.5);
   margin-right: $spacer-x-inline;
   margin-left: 0;
 }
@@ -157,7 +157,7 @@ label {
 }
 
 .image-upload-controls {
-  padding: ($card-padding-y / 2) ($card-padding-x / 2);
+  padding: ($card-padding-y * 0.5) ($card-padding-x * 0.5);
 
   label {
     &.btn {
@@ -254,7 +254,7 @@ label {
 }
 
 .upload-selector {  label {
-    padding-left: ($modal-inner-spacer-x / 2);
+    padding-left: ($modal-inner-spacer-x * 0.5);
   }
 
   .radios {
@@ -271,7 +271,7 @@ label {
     }
 
     label {
-      margin-right: ($modal-inner-spacer-x / 2);
+      margin-right: ($modal-inner-spacer-x * 0.5);
 
       &:last-child {
         margin-bottom: 0;
diff --git a/scss/common/_header.scss b/scss/common/_header.scss
index 099b944..5c8569e 100644
--- a/scss/common/_header.scss
+++ b/scss/common/_header.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .d-header {
   box-shadow: $header-box-shadow;
   height: auto;
@@ -86,7 +88,7 @@
 
   .ring {
     margin-right: 1px;
-    top: ($chip-padding-y / -2) !important;
+    top: math.div($chip-padding-y, -2) !important;
   }
 }
 
@@ -142,8 +144,8 @@
 
 #main-outlet {
   padding-top: ($header-height + $spacer-y);
-  padding-right: ($spacer-x / 2);
-  padding-left: ($spacer-x / 2);
+  padding-right: ($spacer-x * 0.5);
+  padding-left: ($spacer-x * 0.5);
 }
 
 .title-wrapper {
diff --git a/scss/common/_lightbox.scss b/scss/common/_lightbox.scss
index ff65bb6..482bb80 100644
--- a/scss/common/_lightbox.scss
+++ b/scss/common/_lightbox.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 a {
   &.lightbox {
     &:hover {
@@ -18,7 +20,7 @@ a {
 .meta {
   align-items: flex-end;
   background-color: transparent;
-  background-image: linear-gradient(to bottom, transparent 0%, $black-divider percentage(2 / 3), $black-hint 100%);
+  background-image: linear-gradient(to bottom, transparent 0%, $black-divider percentage(math.div(2, 3)), $black-hint 100%);
   color: $white-primary;
   display: flex;
   font-weight: normal;
@@ -27,7 +29,7 @@ a {
   white-space: nowrap;
 
   .d-icon {
-    margin: ($card-inner-spacer-y / 2) $card-inner-spacer-x;
+    margin: ($card-inner-spacer-y * 0.5) $card-inner-spacer-x;
     min-height: ($font-size-base * $line-height-base);
     min-width: ($font-size-base * $line-height-base);
   }
@@ -37,7 +39,7 @@ a {
   }
 
   .filename {
-    margin: ($card-inner-spacer-y / 2) $card-inner-spacer-x;
+    margin: ($card-inner-spacer-y * 0.5) $card-inner-spacer-x;
 
     + .informations {
       margin-left: 0;
@@ -45,7 +47,7 @@ a {
   }
 
   .informations {
-    margin: ($card-inner-spacer-y / 2) $card-inner-spacer-x;
+    margin: ($card-inner-spacer-y * 0.5) $card-inner-spacer-x;
     padding-right: 0;
   }
 }
diff --git a/scss/common/_login.scss b/scss/common/_login.scss
index f19b552..46d117e 100644
--- a/scss/common/_login.scss
+++ b/scss/common/_login.scss
@@ -58,7 +58,7 @@
     }
 
     .btn {
-      margin: 0 0 ($modal-inner-spacer-y / 2);
+      margin: 0 0 ($modal-inner-spacer-y * 0.5);
       width: 100%;
 
       &:first-child {
diff --git a/scss/common/_material-icons.scss b/scss/common/_material-icons.scss
index 1a2f475..55fb144 100644
--- a/scss/common/_material-icons.scss
+++ b/scss/common/_material-icons.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .fa-anchor {
   @include material-icons('av_timer');
 }
@@ -641,7 +643,7 @@
   font-weight: normal;
   letter-spacing: normal;
   line-height: 1;
-  min-width: ($material-icon-size / $font-size-base * 1em);
+  min-width: (math.div($material-icon-size, $font-size-base) * 1em);
   text-align: center;
   text-rendering: optimizeLegibility;
   text-transform: none;
diff --git a/scss/common/_menu-panel.scss b/scss/common/_menu-panel.scss
index ad44c81..4609268 100644
--- a/scss/common/_menu-panel.scss
+++ b/scss/common/_menu-panel.scss
@@ -18,14 +18,14 @@ div {
 
     .menu-links-row {
       margin-bottom: $menu-panel-inner-spacer-y;
-      padding: 0 ($menu-panel-padding-x / 2);
+      padding: 0 ($menu-panel-padding-x * 0.5);
 
       li {
         &,
         &.glyphs {
           a {
-            padding-right: ($menu-panel-padding-x / 2);
-            padding-left: ($menu-panel-padding-x / 2);
+            padding-right: ($menu-panel-padding-x * 0.5);
+            padding-left: ($menu-panel-padding-x * 0.5);
           }
         }
 
@@ -76,7 +76,7 @@ div {
     }
 
     &.category-link {
-      padding: $menu-panel-inner-spacer-y ($menu-panel-padding-x / 2);
+      padding: $menu-panel-inner-spacer-y ($menu-panel-padding-x * 0.5);
 
       .badge-wrapper.box:last-child {
         margin-right: 0;
@@ -85,19 +85,19 @@ div {
   }
 
   .categories-link {
-    padding: $menu-panel-inner-spacer-y ($menu-panel-padding-x / 2);
+    padding: $menu-panel-inner-spacer-y ($menu-panel-padding-x * 0.5);
   }
 
   .category-links,
   .menu-links {
-    margin-right: ($menu-panel-padding-x / 2);
-    margin-left: ($menu-panel-padding-x / 2);
+    margin-right: ($menu-panel-padding-x * 0.5);
+    margin-left: ($menu-panel-padding-x * 0.5);
 
     a {
       &.widget-link {
         border-radius: $menu-panel-border-radius;
-        padding-right: ($menu-panel-padding-x / 2);
-        padding-left: ($menu-panel-padding-x / 2);
+        padding-right: ($menu-panel-padding-x * 0.5);
+        padding-left: ($menu-panel-padding-x * 0.5);
       }
     }
   }
@@ -248,8 +248,8 @@ div {
       }
 
       .discourse-tag {
-        margin-top: ($menu-panel-inner-spacer-y / 2);
-        margin-bottom: ($menu-panel-inner-spacer-y / 2);
+        margin-top: ($menu-panel-inner-spacer-y * 0.5);
+        margin-bottom: ($menu-panel-inner-spacer-y * 0.5);
       }
     }
 
@@ -266,7 +266,7 @@ div {
     &,
     .drop-down-mode &,
     .drop-down-visible & {
-      top: ($text-field-height / 2 - $text-field-font-size / 2);
+      top: ($text-field-height * 0.5 - $text-field-font-size * 0.5);
       right: $text-field-padding-x;
     }
 
diff --git a/scss/common/_modal.scss b/scss/common/_modal.scss
index acae1e8..365c017 100644
--- a/scss/common/_modal.scss
+++ b/scss/common/_modal.scss
@@ -154,7 +154,7 @@
       }
 
       .d-icon {
-        margin-right: ($modal-inner-spacer-x / 2);
+        margin-right: ($modal-inner-spacer-x * 0.5);
       }
     }
 
@@ -166,7 +166,7 @@
 
       .d-icon {
         .modal & {
-          margin-right: ($btn-padding-x / 2);
+          margin-right: ($btn-padding-x * 0.5);
         }
       }
     }
@@ -184,7 +184,7 @@
 
     .btn + & {
       .modal & {
-        margin-left: ($card-inner-spacer-x / 2);
+        margin-left: ($card-inner-spacer-x * 0.5);
       }
     }
 
@@ -470,11 +470,11 @@
         background-clip: content-box;
 
         &:first-child {
-          padding-right: ($modal-inner-spacer-x / 2);
+          padding-right: ($modal-inner-spacer-x * 0.5);
         }
 
         &:last-child {
-          padding-left: ($modal-inner-spacer-x / 2);
+          padding-left: ($modal-inner-spacer-x * 0.5);
         }
       }
     }
@@ -494,7 +494,7 @@
     }
 
     .revision-content {
-      width: calc(50% - #{$modal-inner-spacer-x / 2});
+      width: calc(50% - #{$modal-inner-spacer-x * 0.5});
 
       &:nth-of-type(2) {
         margin-left: $modal-inner-spacer-x;
@@ -511,13 +511,13 @@
 
     #revisions {
       table {
-        margin-top: ($modal-inner-spacer-y / 2);
+        margin-top: ($modal-inner-spacer-y * 0.5);
       }
 
       .row {
         &,
         &:first-of-type {
-          margin-top: ($modal-inner-spacer-y / 2);
+          margin-top: ($modal-inner-spacer-y * 0.5);
         }
       }
     }
@@ -525,7 +525,7 @@
     #revision-details {
       border-bottom: $modal-border-width solid color-chooser($modal-border-color-dark, $modal-border-color-light);
       margin-top: 0;
-      padding: 0 0 ($modal-inner-spacer-y / 2);
+      padding: 0 0 ($modal-inner-spacer-y * 0.5);
     }
   }
 
@@ -713,9 +713,9 @@
 
     margin-right: 0;
     margin-bottom: 0;
-    margin-left: ($card-inner-spacer-x / 2);
-    padding-right: ($card-inner-spacer-x / 2);
-    padding-left: ($card-inner-spacer-x / 2);
+    margin-left: ($card-inner-spacer-x * 0.5);
+    padding-right: ($card-inner-spacer-x * 0.5);
+    padding-left: ($card-inner-spacer-x * 0.5);
 
     &:last-child {
       margin-left: 0;
diff --git a/scss/common/_notification.scss b/scss/common/_notification.scss
index 26153a7..78a32df 100644
--- a/scss/common/_notification.scss
+++ b/scss/common/_notification.scss
@@ -7,8 +7,8 @@
 
   .close {
     font-size: inherit;
-    top: ($card-padding-y / 2);
-    right: ($card-padding-x / 2);
+    top: ($card-padding-y * 0.5);
+    right: ($card-padding-x * 0.5);
   }
 }
 
diff --git a/scss/common/_picker.scss b/scss/common/_picker.scss
index bdbd4d7..c45d435 100644
--- a/scss/common/_picker.scss
+++ b/scss/common/_picker.scss
@@ -76,7 +76,7 @@
   &::before {
     position: absolute;
     top: $btn-padding-y;
-    left: (($btn-height - $material-icon-size) / 2);
+    left: (($btn-height - $material-icon-size) * 0.5);
     text-indent: 0;
   }
 
diff --git a/scss/common/_reply.scss b/scss/common/_reply.scss
index c6e817d..40f398d 100644
--- a/scss/common/_reply.scss
+++ b/scss/common/_reply.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .composer-popup {
   border-radius: $modal-border-radius;
   box-shadow: $modal-box-shadow;
@@ -139,7 +141,7 @@
 
     .spinner {
       height: ($font-size-base * $line-height-base);
-      margin: 0 0 0 ($card-inner-spacer-x / 2);
+      margin: 0 0 0 ($card-inner-spacer-x * 0.5);
       vertical-align: middle;
       width: ($font-size-base * $line-height-base);
     }
@@ -161,7 +163,7 @@
   }
 
   .category-input {
-    margin: 0 $card-inner-spacer-x ($card-inner-spacer-y / 2) 0;
+    margin: 0 $card-inner-spacer-x ($card-inner-spacer-y * 0.5) 0;
   }
 
   .composer-bottom-right {
@@ -222,9 +224,9 @@
     background-color: color-chooser($white-divider, $black-divider);
     color: inherit;
     font-size: $font-size-sm;
-    margin: 0 0 0 ($card-inner-spacer-x / 2);
+    margin: 0 0 0 ($card-inner-spacer-x * 0.5);
     min-height: $material-icon-size;
-    padding: 0 ($card-inner-spacer-x / 2);
+    padding: 0 ($card-inner-spacer-x * 0.5);
   }
 
   .grippie {
@@ -251,7 +253,7 @@
 
   .mini-tag-chooser {
     background-color: transparent;
-    margin: 0 $card-inner-spacer-x ($card-inner-spacer-y / 2) 0;
+    margin: 0 $card-inner-spacer-x ($card-inner-spacer-y * 0.5) 0;
   }
 
   .popup-menu {
@@ -300,7 +302,7 @@
       border: 0;
       box-shadow: none;
       color: inherit;
-      margin-right: ($card-inner-spacer-x / 2);
+      margin-right: ($card-inner-spacer-x * 0.5);
       min-height: $material-icon-size;
 
       @include focus-hover {
@@ -350,7 +352,7 @@
 
     .composer-controls {
       position: absolute;
-      top: ($spacer / 2);
+      top: ($spacer * 0.5);
       right: $card-padding-x;
 
       .btn-flat {
@@ -376,9 +378,9 @@
     }
 
     .reply-details {
-      max-width: calc(50% - #{$material-icon-size / 2 + $card-inner-spacer-x + $card-padding-x});
+      max-width: calc(50% - #{$material-icon-size * 0.5 + $card-inner-spacer-x + $card-padding-x});
       position: absolute;
-      top: ($spacer / 2);
+      top: ($spacer * 0.5);
       left: $card-padding-x;
 
       .d-icon {
@@ -416,33 +418,33 @@
   .submit-panel {
     border-top: $border-width solid color-chooser($white-divider, $black-divider);
     margin: 0;
-    padding: ($card-padding-y / 2) $card-padding-x;
+    padding: ($card-padding-y * 0.5) $card-padding-x;
 
     .cancel {
       @include btn-base;
 
-      margin-left: ($card-inner-spacer-x / 2);
+      margin-left: ($card-inner-spacer-x * 0.5);
     }
   }
 
   .title-and-category {
-    margin-top: ($card-inner-spacer-y / 2);
+    margin-top: ($card-inner-spacer-y * 0.5);
     margin-bottom: 0;
     padding-right: $card-inner-spacer-x;
     padding-left: $card-padding-x;
   }
 
   .title-input {
-    margin: 0 $card-inner-spacer-x ($card-inner-spacer-y / 2) 0;
+    margin: 0 $card-inner-spacer-x ($card-inner-spacer-y * 0.5) 0;
   }
 
   .toggle-preview {
     @include btn-base;
 
-    margin-right: ($card-padding-x / -2);
+    margin-right: math.div($card-padding-x, -2);
     overflow: hidden;
-    padding-right: ($card-padding-x / 2);
-    padding-left: ($card-padding-x / 2);
+    padding-right: ($card-padding-x * 0.5);
+    padding-left: ($card-padding-x * 0.5);
     text-indent: ($card-padding-x + $material-icon-size);
     width: ($card-padding-x + $material-icon-size);
 
@@ -463,8 +465,8 @@
   }
 
   .user-selector {
-    margin-top: ($card-inner-spacer-y / 2);
-    margin-bottom: ($card-inner-spacer-y / 2);
+    margin-top: ($card-inner-spacer-y * 0.5);
+    margin-bottom: ($card-inner-spacer-y * 0.5);
     padding-left: $card-padding-x;
 
     .ac-wrap {
diff --git a/scss/common/_search.scss b/scss/common/_search.scss
index 3821450..56b24dc 100644
--- a/scss/common/_search.scss
+++ b/scss/common/_search.scss
@@ -38,7 +38,7 @@
   }
 
   .topic {
-    margin-bottom: ($card-inner-spacer-y / 2);
+    margin-bottom: ($card-inner-spacer-y * 0.5);
     max-width: 100%;
     padding-bottom: 0;
 
@@ -73,16 +73,16 @@
 
     .control-group.pull-left {
       margin-bottom: $card-inner-spacer-y;
-      padding-right: ($card-padding-x / 2);
+      padding-right: ($card-padding-x * 0.5);
 
       &:last-child {
         padding-right: 0;
-        padding-left: ($card-padding-x / 2);
+        padding-left: ($card-padding-x * 0.5);
       }
     }
 
     #postTime {
-      margin: 0 0 ($card-inner-spacer-y / 2);
+      margin: 0 0 ($card-inner-spacer-y * 0.5);
     }
   }
 
diff --git a/scss/common/_share.scss b/scss/common/_share.scss
index 60a2f19..624f3a2 100644
--- a/scss/common/_share.scss
+++ b/scss/common/_share.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 #share-link {
   @include card;
 
@@ -12,11 +14,11 @@
 
     .alt-actions {
       height: auto;
-      margin-right: ($card-inner-spacer-x / -2);
+      margin-right: math.div($card-inner-spacer-x, -2);
       min-height: $btn-height;
 
       .btn.close {
-        padding: $btn-padding-y ($card-inner-spacer-x / 2);
+        padding: $btn-padding-y ($card-inner-spacer-x * 0.5);
 
         &:hover {
           .discourse-no-touch & {
@@ -26,13 +28,13 @@
       }
 
       .new-topic {
-        margin-right: ($card-inner-spacer-x / 2);
+        margin-right: ($card-inner-spacer-x * 0.5);
       }
     }
   }
 
   .title {
-    margin-bottom: ($card-inner-spacer-y / 2);
+    margin-bottom: ($card-inner-spacer-y * 0.5);
 
     h3 {
       @include typography-h4;
diff --git a/scss/common/_topic-list-category.scss b/scss/common/_topic-list-category.scss
index a420662..99af2b5 100644
--- a/scss/common/_topic-list-category.scss
+++ b/scss/common/_topic-list-category.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .aspect-image.category-logo {
   margin: $spacer-sm $spacer-sm 0 0;
 }
@@ -20,7 +22,7 @@
   .topic-list {
     .more-topics {
       td {
-        padding-right: ($tbody-cell-padding-x * 2 - $btn-padding-x / 2);
+        padding-right: ($tbody-cell-padding-x * 2 - $btn-padding-x * 0.5);
       }
 
       .btn {
@@ -36,7 +38,7 @@
 
 .category-boxes,
 .category-boxes-with-topics {
-  margin: 0 ($spacer-x / -2) ($spacer-lg - $spacer-y);
+  margin: 0 math.div($spacer-x, -2) ($spacer-lg - $spacer-y);
   width: auto;
 
   h3 {
@@ -49,7 +51,7 @@
   .category-box {
     border-radius: $card-border-radius 0 0 $card-border-radius;
     border-left-width: 2px;
-    margin: 0 ($spacer-x / 2) $spacer-y;
+    margin: 0 ($spacer-x * 0.5) $spacer-y;
     width: calc(33.333333% - #{$spacer-x});
   }
 
diff --git a/scss/common/_topic-list.scss b/scss/common/_topic-list.scss
index 7bb9cb6..00dade9 100644
--- a/scss/common/_topic-list.scss
+++ b/scss/common/_topic-list.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 #bulk-select {
   background-color: transparent;
   padding: 0;
@@ -46,7 +48,7 @@
 
     .d-icon {
       color: inherit;
-      margin: 0 ($spacer-xs / -2) 0 $spacer-xs;
+      margin: 0 math.div($spacer-xs, -2) 0 $spacer-xs;
       vertical-align: top;
     }
   }
@@ -73,7 +75,7 @@
     border-bottom: $table-border-width solid color-chooser($table-border-color-dark, $table-border-color-light);
     border-radius: 0;
     box-shadow: none;
-    padding: (($thead-cell-height - $font-size-base * $line-height-base) / 2) ($thead-cell-padding-x * 2);
+    padding: (($thead-cell-height - $font-size-base * $line-height-base) * 0.5) ($thead-cell-padding-x * 2);
   }
 
   .top-lists {
@@ -374,9 +376,9 @@
 
     > a {
       display: block;
-      margin-top: ($spacer-y-inline / 2);
+      margin-top: ($spacer-y-inline * 0.5);
       margin-right: $spacer-x-inline;
-      margin-bottom: ($spacer-y-inline / 2);
+      margin-bottom: ($spacer-y-inline * 0.5);
     }
   }
 
@@ -413,7 +415,7 @@
         background-color: color-chooser($table-bg-dark, $table-bg-light);
         color: unquote('$tertiary');
         font-size: inherit;
-        padding: 0 ($tbody-cell-padding-x / 2);
+        padding: 0 ($tbody-cell-padding-x * 0.5);
       }
     }
   }
@@ -447,9 +449,9 @@
 }
 
 .topic-thumbnail {
-  padding-top: (($font-size-base * $line-height-base - $font-size-base) / 2);
+  padding-top: (($font-size-base * $line-height-base - $font-size-base) * 0.5);
   padding-right: $tbody-cell-padding-x;
-  padding-bottom: (($font-size-base * $line-height-base - $font-size-base) / 2);
+  padding-bottom: (($font-size-base * $line-height-base - $font-size-base) * 0.5);
 
   .thumbnail {
     border-radius: $table-border-radius;
diff --git a/scss/common/_topic-post.scss b/scss/common/_topic-post.scss
index 0dcc5ff..e2d1df4 100644
--- a/scss/common/_topic-post.scss
+++ b/scss/common/_topic-post.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 nav {
   &.post-controls {
     a,
@@ -7,16 +9,16 @@ nav {
 
     button {
       font-size: $btn-font-size;
-      margin-right: ($card-inner-spacer-x / 2);
+      margin-right: ($card-inner-spacer-x * 0.5);
       margin-left: 0;
-      padding: $btn-padding-y ($card-inner-spacer-x / 2);
+      padding: $btn-padding-y ($card-inner-spacer-x * 0.5);
 
       &:active {
         box-shadow: none;
       }
 
       &.bookmark {
-        padding: $btn-padding-y ($card-inner-spacer-x / 2);
+        padding: $btn-padding-y ($card-inner-spacer-x * 0.5);
       }
 
       &.create {
@@ -35,12 +37,12 @@ nav {
       display: flex;
       flex-wrap: wrap;
       float: none;
-      padding: ($card-inner-spacer-y / 2) ($card-padding-x / 2);
+      padding: ($card-inner-spacer-y * 0.5) ($card-padding-x * 0.5);
       text-align: left;
     }
 
     .double-button {
-      margin-right: ($card-inner-spacer-x / 2);
+      margin-right: ($card-inner-spacer-x * 0.5);
 
       button {
         &.button-count {
@@ -52,7 +54,7 @@ nav {
           + .toggle-like {
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
-            padding-left: ($card-inner-spacer-x / 2);
+            padding-left: ($card-inner-spacer-x * 0.5);
           }
         }
       }
@@ -132,8 +134,8 @@ nav {
     }
 
     .show-replies {
-      margin-top: ($card-inner-spacer-y / 2);
-      margin-left: ($card-inner-spacer-x / 2);
+      margin-top: ($card-inner-spacer-y * 0.5);
+      margin-left: ($card-inner-spacer-x * 0.5);
 
       .d-icon {
         margin-left: $spacer-x-inline;
@@ -203,9 +205,9 @@ section {
 
     border: 0;
     color: color-chooser($white-secondary, $black-secondary);
-    margin: ($card-inner-spacer-y / 2) ($card-inner-spacer-x / 2);
-    padding-right: ($card-inner-spacer-x / 2);
-    padding-left: ($card-inner-spacer-x / 2);
+    margin: ($card-inner-spacer-y * 0.5) ($card-inner-spacer-x * 0.5);
+    padding-right: ($card-inner-spacer-x * 0.5);
+    padding-left: ($card-inner-spacer-x * 0.5);
     position: static;
 
     &:active,
@@ -377,8 +379,8 @@ section {
 
 .reply-to-tab {
   img {
-    margin-right: ($card-inner-spacer-x / 2);
-    margin-left: ($card-inner-spacer-x / 2);
+    margin-right: ($card-inner-spacer-x * 0.5);
+    margin-left: ($card-inner-spacer-x * 0.5);
   }
 }
 
@@ -413,7 +415,7 @@ section {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: ($card-inner-spacer-y / -2);
+    margin-bottom: math.div($card-inner-spacer-y, -2);
     margin-left: ($card-inner-spacer-x * -1);
 
     a {
@@ -448,12 +450,12 @@ section {
     @include btn-raised-reverse;
 
     color: color-chooser($white-secondary, $black-secondary);
-    margin-top: (($btn-height-sm - $font-size-base * $line-height-base) / -2);
-    margin-right: ($card-inner-spacer-x / 2);
-    margin-bottom: (($btn-height-sm - $font-size-base * $line-height-base) / -2);
+    margin-top: math.div($btn-height-sm - $font-size-base * $line-height-base, -2);
+    margin-right: ($card-inner-spacer-x * 0.5);
+    margin-bottom: math.div($btn-height-sm - $font-size-base * $line-height-base, -2);
 
     &:first-child {
-      margin-right: ($card-padding-x / -2);
+      margin-right: math.div($card-padding-x, -2);
     }
   }
 
@@ -480,7 +482,7 @@ section {
 
     .custom-message {
       font-size: inherit;
-      margin-top: ($card-inner-spacer-y / 2);
+      margin-top: ($card-inner-spacer-y * 0.5);
       width: 100%;
     }
 
@@ -490,7 +492,7 @@ section {
   }
 
   .topic-avatar {
-    margin-top: (($material-icon-size - $font-size-base * $line-height-base) / 2);
+    margin-top: (($material-icon-size - $font-size-base * $line-height-base) * 0.5);
     margin-right: 0;
     padding: 0;
     position: static;
@@ -604,14 +606,14 @@ section {
   h3 {
     @include typography-h6;
 
-    margin-bottom: ($card-inner-spacer-y / 2);
+    margin-bottom: ($card-inner-spacer-y * 0.5);
   }
 
   h4 {
     @include typography-caption;
 
     color: color-chooser($card-color-dark, $card-color-light);
-    margin: 0 0 ($card-inner-spacer-y / 2 / 2);
+    margin: 0 0 ($card-inner-spacer-y * 0.5 * 0.5);
   }
 
   section {
@@ -634,15 +636,15 @@ section {
       @include typography-caption;
 
       align-items: center;
-      border-radius: ($btn-height / 4);
+      border-radius: ($btn-height * 0.25);
       display: flex;
-      height: ($btn-height / 2);
-      padding: 0 ($card-inner-spacer-x / 2);
-      top: ($btn-height / 2 / -2);
+      height: ($btn-height * 0.5);
+      padding: 0 ($card-inner-spacer-x * 0.5);
+      top: math.div($btn-height * 0.5, -2);
     }
 
     > div {
-      margin: ($spacer-y-inline / 2) 0;
+      margin: ($spacer-y-inline * 0.5) 0;
     }
   }
 
@@ -680,7 +682,7 @@ section {
       margin-left: ($card-inner-spacer-x * -1);
 
       &:last-child {
-        margin-bottom: ($card-inner-spacer-y / -2);
+        margin-bottom: math.div($card-inner-spacer-y, -2);
       }
     }
   }
@@ -690,7 +692,7 @@ section {
   }
 
   .link-summary {
-    margin-top: ($card-inner-spacer-y / 2);
+    margin-top: ($card-inner-spacer-y * 0.5);
 
     .btn {
       background-color: transparent;
@@ -721,7 +723,7 @@ section {
     }
 
     li {
-      padding: $card-inner-spacer-y ($card-inner-spacer-x / 2);
+      padding: $card-inner-spacer-y ($card-inner-spacer-x * 0.5);
 
       &:first-child {
         padding-left: $card-padding-x;
@@ -763,12 +765,12 @@ section {
     .user {
       align-items: center;
       background-color: color-chooser($chip-bg-dark, $chip-bg-light);
-      border-radius: ($chip-height / 2);
+      border-radius: ($chip-height * 0.5);
       color: inherit;
       display: flex;
       font-size: $font-size-sm;
       height: $chip-height;
-      margin: ($card-inner-spacer-y / 2) $card-inner-spacer-x ($card-inner-spacer-y / 2) 0;
+      margin: ($card-inner-spacer-y * 0.5) $card-inner-spacer-x ($card-inner-spacer-y * 0.5) 0;
       padding: 0 $chip-padding-x 0 ($chip-height + $chip-inner-spacer-x);
       position: relative;
 
@@ -819,7 +821,7 @@ section {
     }
 
     td {
-      padding: 0 0 ($card-inner-spacer-y / 2);
+      padding: 0 0 ($card-inner-spacer-y * 0.5);
     }
 
     tr:last-child td {
@@ -839,7 +841,7 @@ section {
 .topic-meta-data {
   .topic-post & {
     min-height: ($card-avatar-size + $card-padding-y);
-    padding: $card-padding-y ($card-padding-x / 2) 0 ($card-avatar-size + $card-inner-spacer-y + $card-padding-y);
+    padding: $card-padding-y ($card-padding-x * 0.5) 0 ($card-avatar-size + $card-inner-spacer-y + $card-padding-y);
   }
 
   .names {
@@ -850,14 +852,14 @@ section {
 
   .post-info {
     margin-right: 0;
-    margin-left: ($card-inner-spacer-x / 2);
+    margin-left: ($card-inner-spacer-x * 0.5);
 
     a {
       @include btn-base;
 
       color: color-chooser($white-secondary, $black-secondary);
       font-size: $btn-font-size-sm;
-      padding: $btn-padding-y-sm ($card-padding-x / 2);
+      padding: $btn-padding-y-sm ($card-padding-x * 0.5);
     }
   }
 }
@@ -1018,11 +1020,11 @@ section {
 .who-liked {
   clear: both;
   margin: 0;
-  padding: 0 $card-padding-x ($card-inner-spacer-y / 2);
+  padding: 0 $card-padding-x ($card-inner-spacer-y * 0.5);
   text-align: inherit;
 
   a {
-    margin: ($card-inner-spacer-y / 2) ($card-inner-spacer-x / 2) ($card-inner-spacer-y / 2) 0;
+    margin: ($card-inner-spacer-y * 0.5) ($card-inner-spacer-x * 0.5) ($card-inner-spacer-y * 0.5) 0;
   }
 
   .avatar {
diff --git a/scss/common/_user-badge.scss b/scss/common/_user-badge.scss
index 705af1a..b6a862b 100644
--- a/scss/common/_user-badge.scss
+++ b/scss/common/_user-badge.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .badge-card {
   @include card;
 
@@ -38,7 +40,7 @@
 
       background-color: color-chooser($card-child-bg-dark, $card-child-bg-light);
       margin-right: 0;
-      min-width: ($card-padding-x * 2 + $font-size-h2 / $font-size-base * $material-icon-size);
+      min-width: ($card-padding-x * 2 + math.div($font-size-h2, $font-size-base) * $material-icon-size);
       padding: $card-padding-y $card-padding-x;
     }
 
@@ -49,7 +51,7 @@
       h3 {
         @include typography-h4;
 
-        margin-bottom: ($card-inner-spacer-y / 2);
+        margin-bottom: ($card-inner-spacer-y * 0.5);
       }
     }
 
@@ -61,13 +63,13 @@
 
   .check-display {
     align-items: center;
-    border-radius: ($material-icon-size / 2);
+    border-radius: ($material-icon-size * 0.5);
     display: flex;
     font-size: $font-size-base;
     height: $material-icon-size;
     justify-content: center;
-    top: ($card-padding-y / 2);
-    left: ($card-padding-x / 2);
+    top: ($card-padding-y * 0.5);
+    left: ($card-padding-x * 0.5);
     width: $material-icon-size;
   }
 
@@ -76,8 +78,8 @@
     font-size: $font-size-base;
     font-weight: normal;
     line-height: 1;
-    top: ($card-padding-y / 2);
-    right: ($card-padding-x / 2);
+    top: ($card-padding-y * 0.5);
+    right: ($card-padding-x * 0.5);
   }
 }
 
diff --git a/scss/common/_user-card.scss b/scss/common/_user-card.scss
index 03ebc6a..0c0d997 100644
--- a/scss/common/_user-card.scss
+++ b/scss/common/_user-card.scss
@@ -1,9 +1,11 @@
+@use "sass:math";
+
 .user-badge,
 #user-card.show-badges .more-user-badges {
   align-items: center;
   background-color: color-chooser($chip-bg-dark, $chip-bg-light);
   border: 0;
-  border-radius: ($chip-height / 2);
+  border-radius: ($chip-height * 0.5);
   box-shadow: none;
   color: unquote('$primary');
   display: inline-flex;
@@ -62,14 +64,14 @@
       .user-badge {
         background-color: color-chooser($chip-bg-dark, $chip-bg-light);
         border: 0;
-        margin-right: ($card-inner-spacer-x / 2);
+        margin-right: ($card-inner-spacer-x * 0.5);
       }
     }
 
     .names {
       flex-grow: 1;
       height: auto;
-      margin-bottom: ($card-inner-spacer-y / 2);
+      margin-bottom: ($card-inner-spacer-y * 0.5);
       width: auto;
 
       span {
@@ -87,7 +89,7 @@
   h1 {
     @include typography-h4;
 
-    margin-bottom: ($card-inner-spacer-y / 2);
+    margin-bottom: ($card-inner-spacer-y * 0.5);
     max-width: none;
     min-width: 0;
 
@@ -105,7 +107,7 @@
   h2 {
     @include typography-body;
 
-    margin-bottom: ($card-inner-spacer-y / 2);
+    margin-bottom: ($card-inner-spacer-y * 0.5);
     max-width: none;
   }
 
@@ -149,13 +151,13 @@
     margin-bottom: $card-inner-spacer-y;
 
     img {
-      height: ($card-inner-spacer-y / 2 + $font-size-body * $line-height-body + $font-size-h4 * $line-height-h4);
-      width: ($card-inner-spacer-y / 2 + $font-size-body * $line-height-body + $font-size-h4 * $line-height-h4);
+      height: ($card-inner-spacer-y * 0.5 + $font-size-body * $line-height-body + $font-size-h4 * $line-height-h4);
+      width: ($card-inner-spacer-y * 0.5 + $font-size-body * $line-height-body + $font-size-h4 * $line-height-h4);
     }
   }
 
   .usercard-controls {
-    margin: (($btn-height - $font-size-h4 * $line-height-h4) / -2) ($btn-padding-x / -2) ($card-inner-spacer-y / 2) 0;
+    margin: math.div($btn-height - $font-size-h4 * $line-height-h4, -2) math.div($btn-padding-x, -2) ($card-inner-spacer-y * 0.5) 0;
 
     a {
       display: flex;
diff --git a/scss/common/_user.scss b/scss/common/_user.scss
index 20d7999..65368c8 100644
--- a/scss/common/_user.scss
+++ b/scss/common/_user.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .admin-user .details {
   @include card;
 
@@ -195,11 +197,11 @@
   @include card;
 
   li {
-    margin: ($card-inner-spacer-y / 2) ($card-inner-spacer-x * 2) 0 0;
+    margin: ($card-inner-spacer-y * 0.5) ($card-inner-spacer-x * 2) 0 0;
     padding: 0;
 
     &:last-of-type {
-      margin: ($card-inner-spacer-y / 2) 0 0;
+      margin: ($card-inner-spacer-y * 0.5) 0 0;
     }
 
     &.linked-stat {
@@ -232,7 +234,7 @@
 
   + div > p:first-child,
   + p {
-    margin-top: ($card-inner-spacer-y / 2);
+    margin-top: ($card-inner-spacer-y * 0.5);
   }
 }
 
@@ -267,7 +269,7 @@
     td,
     th {
       border-top: $table-border-width solid color-chooser($table-border-color-dark, $table-border-color-light);
-      padding: $card-inner-spacer-y ($card-inner-spacer-x / 2);
+      padding: $card-inner-spacer-y ($card-inner-spacer-x * 0.5);
 
       &:first-child {
         padding-left: $card-padding-x;
@@ -306,7 +308,7 @@
 
   @media (min-width: 569px) {
     margin-right: $spacer-x-lg;
-    width: calc(50% - #{$spacer-x-lg / 2});
+    width: calc(50% - #{$spacer-x-lg * 0.5});
 
     &:last-child {
       margin-right: 0;
@@ -368,7 +370,7 @@
     align-items: center;
     display: flex;
     height: auto;
-    padding: ($card-padding-y / 2) ($card-padding-x - $btn-padding-x / 2);
+    padding: ($card-padding-y * 0.5) ($card-padding-x - $btn-padding-x * 0.5);
 
     .btn {
       @include btn-footer;
@@ -463,7 +465,7 @@
       width: auto;
 
       a {
-        margin-bottom: ($card-inner-spacer-y / 2);
+        margin-bottom: ($card-inner-spacer-y * 0.5);
         padding: $btn-padding-y $btn-padding-x;
         width: 100%;
       }
@@ -484,14 +486,14 @@
       h2 {
         @include typography-h5;
 
-        margin-top: ($card-inner-spacer-y / 2);
+        margin-top: ($card-inner-spacer-y * 0.5);
         margin-bottom: 0;
       }
 
       h3 {
         @include typography-body;
 
-        margin-top: ($card-inner-spacer-y / 2);
+        margin-top: ($card-inner-spacer-y * 0.5);
         margin-bottom: 0;
 
         .d-icon {
@@ -529,7 +531,7 @@
         }
 
         .bio {
-          margin-top: ($card-inner-spacer-y / 2);
+          margin-top: ($card-inner-spacer-y * 0.5);
           max-width: 100%;
 
           > :last-child {
@@ -572,7 +574,7 @@
 
         dt {
           color: color-chooser($white-secondary, $black-secondary);
-          margin-right: ($card-inner-spacer-x / 2);
+          margin-right: ($card-inner-spacer-x * 0.5);
 
           &:last-child {
             margin-right: 0;
@@ -598,7 +600,7 @@
     a {
       align-items: center;
       background-color: color-chooser($chip-bg-dark, $chip-bg-light);
-      border-radius: ($chip-height / 2);
+      border-radius: ($chip-height * 0.5);
       color: inherit;
       display: flex;
       font-size: $chip-font-size;
@@ -889,7 +891,7 @@
   .child-actions {
     align-items: center;
     display: flex;
-    margin-top: ($card-inner-spacer-y / 2);
+    margin-top: ($card-inner-spacer-y * 0.5);
 
     .avatar {
       height: $material-icon-size;
@@ -912,7 +914,7 @@
 
   .excerpt {
     font-size: inherit;
-    margin: ($card-inner-spacer-y / 2) 0 0;
+    margin: ($card-inner-spacer-y * 0.5) 0 0;
 
     &:empty {
       display: none;
@@ -961,9 +963,9 @@
   .remove-bookmark {
     @include btn-raised-reverse;
 
-    margin: ($card-inner-spacer-y / -4) ($btn-padding-x / -2) ($card-inner-spacer-y / -4) auto;
-    padding-right: ($btn-padding-x / 2);
-    padding-left: ($btn-padding-x / 2);
+    margin: math.div($card-inner-spacer-y, -4) math.div($btn-padding-x, -2) math.div($card-inner-spacer-y, -4) auto;
+    padding-right: ($btn-padding-x * 0.5);
+    padding-left: ($btn-padding-x * 0.5);
 
     .fa {
       margin-right: 0;
diff --git a/scss/mixins/_button.scss b/scss/mixins/_button.scss
index e1fa412..c9c4b8f 100644
--- a/scss/mixins/_button.scss
+++ b/scss/mixins/_button.scss
@@ -131,9 +131,9 @@
 // Size
 
 @mixin btn-footer {
-  margin-left: ($card-inner-spacer-x / 2);
-  padding-right: ($card-inner-spacer-x / 2);
-  padding-left: ($card-inner-spacer-x / 2);
+  margin-left: ($card-inner-spacer-x * 0.5);
+  padding-right: ($card-inner-spacer-x * 0.5);
+  padding-left: ($card-inner-spacer-x * 0.5);
 
   &:first-child {
     margin-left: 0;
diff --git a/scss/mixins/_material-icons.scss b/scss/mixins/_material-icons.scss
index a351630..2bd068b 100644
--- a/scss/mixins/_material-icons.scss
+++ b/scss/mixins/_material-icons.scss
@@ -3,25 +3,27 @@
 // Font metrics used in the calculation are from Roboro Regular:
 // https://github.com/google/fonts/blob/master/apache/roboto/Roboto-Regular.ttf
 
+@use "sass:math";
+
 $roboto-fm-ascender:        1946 !default;
 $roboto-fm-capital-height:  1456 !default;
 $roboto-fm-descender:       512 !default;
 
-$roboto-capital-height:     ($font-size-base / 1px * $line-height-base) !default;
-$roboto-computed-font-size: ($roboto-capital-height / $roboto-fm-capital-height) !default;
+$roboto-capital-height:     (math.div($font-size-base, 1px) * $line-height-base) !default;
+$roboto-computed-font-size: math.div($roboto-capital-height, $roboto-fm-capital-height) !default;
 $roboto-distance-bottom:    $roboto-fm-descender !default;
 $roboto-distance-top:       ($roboto-fm-ascender - $roboto-fm-capital-height) !default;
 
 %material-icons {
   font-family: 'Material Icons';
   font-feature-settings: 'liga';
-  font-size: ($material-icon-size / $font-size-base * 1em);
+  font-size: (math.div($material-icon-size, $font-size-base) * 1em);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
-  line-height: ($font-size-base / $material-icon-size * 1em);
+  line-height: (math.div($font-size-base, $material-icon-size) * 1em);
   text-rendering: optimizeLegibility;
   text-transform: none;
   vertical-align: (($roboto-distance-bottom - $roboto-distance-top) * $roboto-computed-font-size * -1em);
diff --git a/scss/mobile/_admin.scss b/scss/mobile/_admin.scss
index 8439f0e..ad35176 100644
--- a/scss/mobile/_admin.scss
+++ b/scss/mobile/_admin.scss
@@ -5,7 +5,7 @@
 
   &,
   &.mobile-open {
-    transform: translate3d(calc(50% + #{$spacer-x / 2}), 0, 0);
+    transform: translate3d(calc(50% + #{$spacer-x * 0.5}), 0, 0);
   }
 
   &.mobile-closed {
@@ -20,7 +20,7 @@
 }
 
 .admin-nav {
-  width: calc(50% - #{$spacer-x / 2});
+  width: calc(50% - #{$spacer-x * 0.5});
 }
 
 .customize {
@@ -52,7 +52,7 @@
   > .pull-right {
     clear: both;
     float: none;
-    margin-top: ($card-inner-spacer-y / 2);
+    margin-top: ($card-inner-spacer-y * 0.5);
 
     > :last-child {
       margin-right: 0;
diff --git a/scss/mobile/_base-override.scss b/scss/mobile/_base-override.scss
index 113c742..26fc464 100644
--- a/scss/mobile/_base-override.scss
+++ b/scss/mobile/_base-override.scss
@@ -52,5 +52,5 @@ body .boxed .contents {
 }
 
 .wrap {
-  padding: 0 ($spacer-x / 2);
+  padding: 0 ($spacer-x * 0.5);
 }
diff --git a/scss/mobile/_login.scss b/scss/mobile/_login.scss
index 0d94572..0c51530 100644
--- a/scss/mobile/_login.scss
+++ b/scss/mobile/_login.scss
@@ -4,7 +4,7 @@
   button {
     display: block;
     margin-right: 0;
-    margin-bottom: ($modal-inner-spacer-y / 2);
+    margin-bottom: ($modal-inner-spacer-y * 0.5);
     width: 100%;
 
     &:last-child {
diff --git a/scss/mobile/_reply.scss b/scss/mobile/_reply.scss
index 17dc914..add4937 100644
--- a/scss/mobile/_reply.scss
+++ b/scss/mobile/_reply.scss
@@ -9,7 +9,7 @@
   }
 
   .category-input {
-    margin-top: ($card-inner-spacer-y / 2);
+    margin-top: ($card-inner-spacer-y * 0.5);
     padding-right: 0;
     padding-left: 0;
 
@@ -39,8 +39,8 @@
       @include btn-sm;
 
       max-width: none;
-      padding-right: ($btn-padding-x-sm / 2);
-      padding-left: ($btn-padding-x-sm / 2);
+      padding-right: ($btn-padding-x-sm * 0.5);
+      padding-left: ($btn-padding-x-sm * 0.5);
     }
   }
 
diff --git a/scss/mobile/_topic-list.scss b/scss/mobile/_topic-list.scss
index d09cc16..7d26ed2 100644
--- a/scss/mobile/_topic-list.scss
+++ b/scss/mobile/_topic-list.scss
@@ -86,13 +86,13 @@ tr {
 .topic-list {
   .badge-notification {
     font-size: inherit;
-    padding: ($chip-padding-y / 2) ($chip-padding-x / 2);
+    padding: ($chip-padding-y * 0.5) ($chip-padding-x * 0.5);
   }
 
   .category-topic-link td {
     &.num .badge-notification {
       font-size: inherit;
-      padding: ($chip-padding-y / 2) ($chip-padding-x / 2);
+      padding: ($chip-padding-y * 0.5) ($chip-padding-x * 0.5);
     }
   }
 
diff --git a/scss/mobile/_topic-post.scss b/scss/mobile/_topic-post.scss
index 6574f28..ee10492 100644
--- a/scss/mobile/_topic-post.scss
+++ b/scss/mobile/_topic-post.scss
@@ -14,8 +14,8 @@
   @include btn-raised;
 
   position: fixed;
-  top: ($spacer-x / 2 + $header-height);
-  right: ($spacer-x / 2);
+  top: ($spacer-x * 0.5 + $header-height);
+  right: ($spacer-x * 0.5);
 }
 
 .small-action {
diff --git a/scss/mobile/_user.scss b/scss/mobile/_user.scss
index ef67f02..c1fd042 100644
--- a/scss/mobile/_user.scss
+++ b/scss/mobile/_user.scss
@@ -39,7 +39,7 @@
 
       ul {
         display: flex;
-        margin-top: ($card-inner-spacer-y / 2);
+        margin-top: ($card-inner-spacer-y * 0.5);
       }
     }
 
@@ -63,7 +63,7 @@
       }
 
       dd {
-        margin-bottom: ($card-inner-spacer-y / 2);
+        margin-bottom: ($card-inner-spacer-y * 0.5);
 
         &:last-child {
           margin-bottom: 0;
@@ -80,7 +80,7 @@
       flex-direction: column;
 
       .span15 {
-        margin-bottom: ($card-inner-spacer-y / 2);
+        margin-bottom: ($card-inner-spacer-y * 0.5);
       }
     }