diff --git a/app/assets/stylesheets/components/_answerbox.scss b/app/assets/stylesheets/components/_answerbox.scss
index 74b33157..474d1f5a 100644
--- a/app/assets/stylesheets/components/_answerbox.scss
+++ b/app/assets/stylesheets/components/_answerbox.scss
@@ -1,13 +1,15 @@
+@use "sass:map";
+
 .answerbox {
-  &__question-text, 
-  &__question-user, 
-  &__answer-user, 
+  &__question-text,
+  &__question-user,
+  &__answer-user,
   &__answer-date {
     margin-bottom: 0;
     overflow: hidden;
     word-break: break-word;
   }
-  
+
   &__answer-date {
     font-size: .8rem;
     line-height: .8;
@@ -15,16 +17,16 @@
   }
 
   &__answer-text {
-    margin-bottom: map-get($spacers, 3);
+    margin-bottom: map.get($spacers, 3);
   }
 
   &__question-user-avatar,
   &__answer-user-avatar {
-    margin-right: map-get($spacers, 2);
+    margin-right: map.get($spacers, 2);
     border-radius: $avatar-border-radius;
   }
 
-  & .text-muted a, 
+  & .text-muted a,
   & .text-muted a:hover {
     color: var(--muted-text);
     text-decoration: none;
@@ -32,7 +34,7 @@
 
   &__action {
     padding-left: 0;
-    padding-right: map-get($spacers, 1);
+    padding-right: map.get($spacers, 1);
 
     & i {
       font-size: 1.4rem;
@@ -55,7 +57,7 @@
 
       &[data-action="unsmile"] {
         color: var(--success);
-        
+
         &:hover {
           color: var(--danger);
         }
diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss
index 1ee43d24..fed1e673 100644
--- a/app/assets/stylesheets/components/_comments.scss
+++ b/app/assets/stylesheets/components/_comments.scss
@@ -1,6 +1,8 @@
+@use "sass:map";
+
 .comment {
   list-style-type: none;
-  margin-bottom: map-get($spacers, 2);
+  margin-bottom: map.get($spacers, 2);
 
   &__container {
     padding-left: 0;
@@ -13,7 +15,7 @@
   }
 
   &__user-avatar {
-    margin-right: map-get($spacers, 2);
+    margin-right: map.get($spacers, 2);
     border-radius: $avatar-border-radius;
   }
 
diff --git a/app/assets/stylesheets/components/_container.scss b/app/assets/stylesheets/components/_container.scss
index 701a5517..a9bf3e06 100644
--- a/app/assets/stylesheets/components/_container.scss
+++ b/app/assets/stylesheets/components/_container.scss
@@ -1,10 +1,12 @@
+@use "sass:map";
+
 .container--main {
-  padding-top: map-get($spacers, 3);
-  padding-bottom: map-get($spacers, 3);
+  padding-top: map.get($spacers, 3);
+  padding-bottom: map.get($spacers, 3);
   // Sass doesn't know about the safe-area-inset-* env vars and throws a syntax error
   // We can get around this by using unquote()
   // Sass also has its own built-in max() function which is not the same as the CSS one
   // In order to use the correct one we can write it as Max() instead
   padding-left: unquote('Max(15px, env(safe-area-inset-left))');
   padding-right: unquote('Max(15px, env(safe-area-inset-right))');
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/components/_entry.scss b/app/assets/stylesheets/components/_entry.scss
index 9d3dc03b..2afa5274 100644
--- a/app/assets/stylesheets/components/_entry.scss
+++ b/app/assets/stylesheets/components/_entry.scss
@@ -1,6 +1,8 @@
+@use "sass:map";
+
 .entry {
   $this: &;
-  margin: map-get($spacers, 4) 0;
+  margin: map.get($spacers, 4) 0;
 
   &__value {
     display: block;
@@ -19,4 +21,4 @@
     text-align: center;
     text-transform: uppercase;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/components/_locales.scss b/app/assets/stylesheets/components/_locales.scss
index 48a6ff5c..25bd5dba 100644
--- a/app/assets/stylesheets/components/_locales.scss
+++ b/app/assets/stylesheets/components/_locales.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .locales {
   text-align: center;
 
@@ -9,7 +11,7 @@
     ul {
       margin:          0;
       padding:         0;
-      padding-top:     map-get($spacers, 3);
+      padding-top:     map.get($spacers, 3);
       width:           100%;
       list-style:      none;
       display:         inline-flex;
@@ -17,7 +19,7 @@
       flex-wrap:       wrap;
       align-items:     center;
       justify-content: center;
-      
+
       li {
         margin:     0 5px 10px 5px;
         flex:       0 0 auto;
diff --git a/app/assets/stylesheets/components/_notifications.scss b/app/assets/stylesheets/components/_notifications.scss
index 07ce4e23..53fa696e 100644
--- a/app/assets/stylesheets/components/_notifications.scss
+++ b/app/assets/stylesheets/components/_notifications.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .notification {
   word-break: break-word;
 
@@ -12,7 +14,7 @@
   }
 
   &__icon {
-    margin-right: map-get($spacers, 2);
+    margin-right: map.get($spacers, 2);
     min-width: 40px;
   }
 
@@ -49,7 +51,7 @@
   }
 
   .list-group-item {
-    margin-top: map-get($spacers, 2);
+    margin-top: map.get($spacers, 2);
     background-color: var(--raised-accent);
 
     p {
diff --git a/app/assets/stylesheets/components/_profile.scss b/app/assets/stylesheets/components/_profile.scss
index 6d8a8229..efebc377 100644
--- a/app/assets/stylesheets/components/_profile.scss
+++ b/app/assets/stylesheets/components/_profile.scss
@@ -1,21 +1,23 @@
+@use "sass:map";
+
 .profile {
   &__avatar {
     display: block;
-    width: map-get($avatar-sizes, "xl");
-    height: map-get($avatar-sizes, "xl");
-    margin: -(map-get($avatar-sizes, "xl") / 2.5) map-get($spacers, 4) 0;
+    width: map.get($avatar-sizes, "xl");
+    height: map.get($avatar-sizes, "xl");
+    margin: -(map.get($avatar-sizes, "xl") / 2.5) map.get($spacers, 4) 0;
     border-radius: $avatar-border-radius;
     box-shadow: $box-shadow;
 
     @include media-breakpoint-up(sm) {
-      width: map-get($avatar-sizes, "xxl");
-      height: map-get($avatar-sizes, "xxl");
-      margin: -(map-get($avatar-sizes, "xxl") / 2) auto 0;
+      width: map.get($avatar-sizes, "xxl");
+      height: map.get($avatar-sizes, "xxl");
+      margin: -(map.get($avatar-sizes, "xxl") / 2) auto 0;
     }
   }
 
   &__header-card {
-    margin-top: map-get($spacers, 3);
+    margin-top: map.get($spacers, 3);
     overflow: hidden;
   }
 
@@ -25,7 +27,7 @@
     overflow: hidden;
 
     @include media-breakpoint-up(sm) {
-      padding: map-get($spacers, 4);
+      padding: map.get($spacers, 4);
       padding-bottom: 0;
     }
   }
@@ -50,12 +52,12 @@
   &__biography,
   &__website,
   &__location {
-    margin-bottom: map-get($spacers, 3);
+    margin-bottom: map.get($spacers, 3);
   }
 
   &__actions,
   &__biography {
-    margin-top: map-get($spacers, 3);
+    margin-top: map.get($spacers, 3);
   }
 
   &__display-name {
@@ -83,7 +85,7 @@
 
   @include media-breakpoint-up(sm) {
     &__name {
-      margin-bottom: map-get($spacers, 3);
+      margin-bottom: map.get($spacers, 3);
     }
 
     & .card-body {
@@ -94,4 +96,4 @@
 
 .user--banned {
   text-decoration: line-through !important;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/components/_smiles.scss b/app/assets/stylesheets/components/_smiles.scss
index b1725d2c..a7e171fb 100644
--- a/app/assets/stylesheets/components/_smiles.scss
+++ b/app/assets/stylesheets/components/_smiles.scss
@@ -1,28 +1,30 @@
+@use "sass:map";
+
 .smiles {
-  margin-bottom: map-get($spacers, 2);
+  margin-bottom: map.get($spacers, 2);
 
   &__user-list {
     margin: 0;
     padding: 0;
     list-style-type: none;
   }
-    
+
   &__user-list-entry {
-    margin-bottom: map-get($spacers, 3);
-    
+    margin-bottom: map.get($spacers, 3);
+
     * {
       display: inline-block;
       vertical-align: middle;
     }
-  
+
     img {
-      height: map-get($avatar-sizes, "lg");
-      width: map-get($avatar-sizes, "lg");
+      height: map.get($avatar-sizes, "lg");
+      width: map.get($avatar-sizes, "lg");
       border-radius: $avatar-border-radius;
     }
-  
+
     span {
       margin-left: 5px;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/components/_userbox.scss b/app/assets/stylesheets/components/_userbox.scss
index 09de41ec..ab76a459 100644
--- a/app/assets/stylesheets/components/_userbox.scss
+++ b/app/assets/stylesheets/components/_userbox.scss
@@ -1,19 +1,21 @@
+@use "sass:map";
+
 .userbox {
   &__header {
     width: 100%;
     height: auto;
     max-height: 70px;
 
-    @include media-breakpoint-up(sm) { 
+    @include media-breakpoint-up(sm) {
       max-height: 60px;
     }
   }
 
   &__avatar {
     display: block;
-    width: map-get($avatar-sizes, "lg");
-    height: map-get($avatar-sizes, "lg");
-    margin-top: -(map-get($avatar-sizes, "lg") / 2);
+    width: map.get($avatar-sizes, "lg");
+    height: map.get($avatar-sizes, "lg");
+    margin-top: -(map.get($avatar-sizes, "lg") / 2);
     margin-left: auto;
     margin-right: auto;
     border-radius: $avatar-border-radius;
@@ -22,7 +24,7 @@
 
   .profile__name {
     display: block;
-    margin: map-get($spacers, 3) 0;
+    margin: map.get($spacers, 3) 0;
     text-align: center;
   }
 
diff --git a/app/assets/stylesheets/overrides/_card.scss b/app/assets/stylesheets/overrides/_card.scss
index 949c21bb..969f7876 100644
--- a/app/assets/stylesheets/overrides/_card.scss
+++ b/app/assets/stylesheets/overrides/_card.scss
@@ -1,5 +1,7 @@
+@use "sass:map";
+
 .card {
-  margin-bottom: map-get($spacers, 3);
+  margin-bottom: map.get($spacers, 3);
   box-shadow: $box-shadow-sm;
   background-color: var(--raised-bg);
 
@@ -8,11 +10,11 @@
   }
 
   &--fullheight {
-    height: calc(100% - map-get($spacers, 3));
+    height: calc(100% - #{map.get($spacers, 3)});
   }
 }
 
 .card-header,
 .card-footer {
   background-color: var(--raised-accent);
-}
\ No newline at end of file
+}