diff --git a/shared/scss/_mixins.scss b/shared/scss/_mixins.scss
index 07605709a..fd687127d 100644
--- a/shared/scss/_mixins.scss
+++ b/shared/scss/_mixins.scss
@@ -1,4 +1,4 @@
-@import 'vars';
+@use 'vars';
 
 /* Logo */
 @mixin ddg_logo() {
@@ -29,7 +29,7 @@
 /* Font groupings */
 @mixin uppercase_label() {
     font-size: 12px;
-    color: $color--grey;
+    color: vars.$color--grey;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: bold;
@@ -96,7 +96,7 @@
             }
 
             .toggle-button__bg {
-                background-color: $color--medium-dark-platinum;
+                background-color: vars.$color--medium-dark-platinum;
             }
         }
 
@@ -106,7 +106,7 @@
             }
 
             .toggle-button__bg {
-                background-color: $color--green;
+                background-color: vars.$color--green;
             }
         }
     }
@@ -138,8 +138,8 @@
     .sliding-subview {
         position: absolute;
         top: 0;
-        left: $popup__width;
-        width: $popup__width;
+        left: vars.$popup__width;
+        width: vars.$popup__width;
         height: 100%;
         box-sizing: border-box;
 
@@ -150,7 +150,7 @@
             transition: left 0.35s ease-in-out;
 
             &.sliding-subview--open {
-                left: -$popup__width;
+                left: -(vars.$popup__width);
             }
         }
 
@@ -174,7 +174,7 @@
             .sliding-subview__header__title {
                 height: 26px;
                 width: 14px;
-                color: $slate;
+                color: vars.$slate;
                 font-size: 14px;
                 font-weight: bold;
                 padding: 14px 0 0 14px;
@@ -194,7 +194,7 @@
                 width: auto;
                 text-align: center;
                 font-weight: bold;
-                color: $slate;
+                color: vars.$slate;
                 padding: 14px 0 10px 0;
                 text-decoration: none;
             }
@@ -230,9 +230,9 @@
     border-radius: 28px;
     font-weight: bold;
     cursor: pointer;
-    border: 1px solid $color--medium-dark-slate;
-    color: $color--medium-dark-slate;
-    background: $white;
+    border: 1px solid vars.$color--medium-dark-slate;
+    color: vars.$color--medium-dark-slate;
+    background: vars.$white;
     padding: 0.4em 1.2em;
     text-decoration: none;
     text-align: center;
diff --git a/shared/scss/base/_forms.scss b/shared/scss/base/_forms.scss
index f82e921ba..45e4d7360 100644
--- a/shared/scss/base/_forms.scss
+++ b/shared/scss/base/_forms.scss
@@ -1,3 +1,5 @@
+@use "../vars";
+
 // General form styles, mostly ripped from
 // https://github.com/duckduckgo/duckduckgo-styles
 // and
@@ -8,7 +10,7 @@
 }
 
 .frm__label {
-    color: $slate;
+    color: vars.$slate;
     margin-bottom: 10px;
     display: block;
 }
@@ -24,9 +26,9 @@
 .frm__input {
     box-sizing: border-box;
     margin: 0;
-    background-color: $silver-light;
+    background-color: vars.$silver-light;
     border: 1px solid #e6e6e6;
-    color: $slate;
+    color: vars.$slate;
     outline: none;
     margin-bottom: 10px;
 }
@@ -68,31 +70,31 @@
     user-select: none;
 
     outline: none !important;
-    background-color: $blue-light;
-    border: 1px solid $blue-light;
+    background-color: vars.$blue-light;
+    border: 1px solid vars.$blue-light;
     line-height: 2;
     font-weight: normal;
     font-size: 1em;
     padding-top: 2px;
     padding-bottom: 2px;
-    color: $white;
+    color: vars.$white;
     -webkit-appearance: none !important;
 
     &:hover,
     &:focus {
         text-decoration: none !important;
-        color: $white;
-        background-color: $blue;
-        border-color: $blue;
+        color: vars.$white;
+        background-color: vars.$blue;
+        border-color: vars.$blue;
     }
     &:active {
-        color: $white;
-        background-color: $blue-dark;
-        border-color: $blue-dark;
+        color: vars.$white;
+        background-color: vars.$blue-dark;
+        border-color: vars.$blue-dark;
     }
     &.is-disabled {
-        border-color: $platinum-darker;
-        background-color: $platinum-darker;
+        border-color: vars.$platinum-darker;
+        background-color: vars.$platinum-darker;
         cursor: default;
         color: #eee;
     }
diff --git a/shared/scss/base/base.scss b/shared/scss/base/base.scss
index 73240253e..b420a3111 100644
--- a/shared/scss/base/base.scss
+++ b/shared/scss/base/base.scss
@@ -1,13 +1,13 @@
-@import '../vars';
-@import '../mixins';
+@use '../vars';
+@use '../mixins';
 
 /* Normalize File */
-@import '../../../node_modules/normalize.scss/normalize';
+@use '../../../node_modules/normalize.scss/normalize';
 
 /* Font definitions */
-@import 'fonts';
+@use 'fonts';
 
-@import 'forms';
+@use 'forms';
 
 /**
  * DDG Extension Resets & Base Styles
@@ -16,7 +16,7 @@
 html,
 body {
     &.body--neutral {
-        background: $color--white;
+        background: vars.$color--white;
     }
 }
 
@@ -28,7 +28,7 @@ h5,
 h5,
 p,
 div {
-    font-size: $font__size--default;
+    font-size: vars.$font__size--default;
     margin: 0;
     padding: 0;
 
@@ -51,7 +51,7 @@ li {
     position: relative;
 
     &.divider-bottom {
-        border-bottom: 1px solid $platinum;
+        border-bottom: 1px solid vars.$platinum;
 
         // Handle space between the last element in the container and the divider
         > :last-child {
@@ -75,7 +75,7 @@ button {
 
 button {
     border: none;
-    background-color: $white;
+    background-color: vars.$white;
     padding: 0;
 }
 
@@ -84,10 +84,10 @@ body,
 input,
 textarea,
 select {
-    font-family: $font__face--default;
-    font-size: $font__size--default;
+    font-family: vars.$font__face--default;
+    font-size: vars.$font__size--default;
     font-weight: normal;
-    color: $slate;
+    color: vars.$slate;
 }
 
 .bold {
@@ -96,7 +96,7 @@ select {
 
 /* Links */
 a {
-    color: $blue;
+    color: vars.$blue;
     text-decoration: none;
 
     &:hover {
@@ -104,7 +104,7 @@ a {
     }
 
     &.link-secondary {
-        color: $slate;
+        color: vars.$slate;
     }
 }
 
@@ -159,11 +159,11 @@ a {
 
 /* Borders */
 .border--top {
-    border-top: $card__border;
+    border-top: vars.$card__border;
 }
 
 .border--bottom {
-    border-bottom: $card__border;
+    border-bottom: vars.$card__border;
 }
 
 .border--bottom--inner {
@@ -171,7 +171,7 @@ a {
 
     &:after {
         content: '';
-        border-bottom: $card__border;
+        border-bottom: vars.$card__border;
         position: absolute;
         bottom: 0;
         left: 20px;
@@ -184,7 +184,7 @@ a {
 
     &:before {
         content: '';
-        border-top: $card__border;
+        border-top: vars.$card__border;
         position: absolute;
         top: 0;
         left: 20px;
@@ -194,11 +194,11 @@ a {
 
 /* Padding */
 .padded {
-    padding: $card--padded;
+    padding: vars.$card--padded;
 }
 
 .padded--top {
-    padding: $card--padded--top;
+    padding: vars.$card--padded--top;
 }
 
 .padded--top-half {
@@ -215,7 +215,7 @@ a {
 
 /* Background */
 .silver-bg {
-    background-color: $color--silver;
+    background-color: vars.$color--silver;
 
     .border--top,
     .border--bottom {
@@ -224,27 +224,27 @@ a {
 }
 
 .warning_bg {
-    background-color: $color--yellow;
+    background-color: vars.$color--yellow;
 }
 
 /* Icons */
 /* Standard icon display within the extension */
 .icon {
-    @include icon_display();
+    @include mixins.icon_display();
     /* you'll need to set the background image within each instance of .icon */
 
     &.icon__close {
         width: 14px;
         height: 14px;
 
-        @include cross_platform_bg_image('close.svg');
+        @include mixins.cross_platform_bg_image('close.svg');
     }
 
     &.icon__arrow {
         width: 12px;
         height: 12px;
 
-        @include cross_platform_bg_image('arrow@2x.png');
+        @include mixins.cross_platform_bg_image('arrow@2x.png');
 
         &.icon__arrow--left {
             transform: rotate(180deg);
@@ -253,7 +253,7 @@ a {
         &.icon__arrow--large {
             width: 7px;
             margin-top: -20px;
-            @include cross_platform_bg_image('arrow--large.svg');
+            @include mixins.cross_platform_bg_image('arrow--large.svg');
         }
     }
 
@@ -261,7 +261,7 @@ a {
         width: 16px;
         height: 16px;
 
-        @include cross_platform_bg_image('settings-gear@2x.png');
+        @include mixins.cross_platform_bg_image('settings-gear@2x.png');
     }
 
     &.icon__error {
@@ -270,7 +270,7 @@ a {
         vertical-align: bottom;
         margin-left: -2px;
 
-        @include cross_platform_bg_image('error.svg');
+        @include mixins.cross_platform_bg_image('error.svg');
     }
 
     &.icon__check {
@@ -280,7 +280,7 @@ a {
         margin-left: 1px;
         vertical-align: top;
 
-        @include cross_platform_bg_image('check.svg');
+        @include mixins.cross_platform_bg_image('check.svg');
     }
 
     &.icon__shield {
@@ -290,7 +290,7 @@ a {
         margin-left: 1px;
         vertical-align: top;
 
-        @include cross_platform_bg_image('shield.svg');
+        @include mixins.cross_platform_bg_image('shield.svg');
     }
 }
 
@@ -319,16 +319,16 @@ a {
         text-align: center;
         padding-top: 5px;
         margin-left: 7px;
-        background-color: $white;
+        background-color: vars.$white;
         border: solid 1px #ddd;
-        color: $slate;
+        color: vars.$slate;
         text-align: center;
         z-index: 1;
         float: right;
     }
 
     .modal-box__popout {
-        @include arrow-left(7px, $platinum);
+        @include mixins.arrow-left(7px, vars.$platinum);
 
         margin-right: -15px;
         margin-top: 13px;
@@ -338,7 +338,7 @@ a {
     }
 
     .modal-box__popout__body {
-        @include arrow-left(6px, $white);
+        @include mixins.arrow-left(6px, vars.$white);
 
         margin-left: 2px;
         margin-top: -6px;
diff --git a/shared/scss/feedback.scss b/shared/scss/feedback.scss
index 1ca6bd6e6..1830c8a69 100644
--- a/shared/scss/feedback.scss
+++ b/shared/scss/feedback.scss
@@ -1,4 +1,4 @@
-@import 'vars';
-@import 'mixins';
+@use 'vars';
+@use 'mixins';
 
-@import 'views/extension-page';
+@use 'views/extension-page';
diff --git a/shared/scss/options.scss b/shared/scss/options.scss
index 30fac8fab..2d57cd7ca 100644
--- a/shared/scss/options.scss
+++ b/shared/scss/options.scss
@@ -1,21 +1,22 @@
-@import 'vars';
-@import 'mixins';
+@use "sass:meta";
+@use 'vars';
+@use 'mixins';
 
 /* Generic menu list styling */
-@include default_list();
+@include mixins.default_list();
 
 /* Generic toggle button styling */
-@include toggle_button();
+@include mixins.toggle_button();
 
-@import 'views/extension-page';
+@include meta.load-css('views/extension-page');
 
 /* allowlist */
-@import 'views/allowlist';
+@include meta.load-css('views/allowlist');
 
 .options-info {
     font-weight: bold;
     margin-bottom: 10px;
-    color: $slate;
+    color: vars.$slate;
 }
 
 .options-content__privacy {
@@ -35,7 +36,7 @@
 }
 
 button:disabled {
-    background-color: $color--light-slate;
+    background-color: vars.$color--light-slate;
 }
 
 .js-options-set-config-url {
@@ -46,10 +47,10 @@ button:disabled {
     width: 120px;
     height: 30px;
     border-radius: 4px;
-    background-color: $blue;
+    background-color: vars.$blue;
     line-height: 1.5;
     text-align: center;
-    color: $white;
+    color: vars.$white;
     margin-left: 7px;
     cursor: pointer;
 }
diff --git a/shared/scss/views/_allowlist.scss b/shared/scss/views/_allowlist.scss
index b3dba4613..bb5173c11 100644
--- a/shared/scss/views/_allowlist.scss
+++ b/shared/scss/views/_allowlist.scss
@@ -1,3 +1,6 @@
+@use "../mixins";
+@use "../vars";
+
 .options-content__allowlist {
     font-size: 14px;
     font-weight: 600;
@@ -10,7 +13,7 @@
         margin-bottom: 12px;
         height: 17px;
         text-align: left;
-        color: $grey-dark;
+        color: vars.$grey-dark;
         font-weight: normal;
     }
 
@@ -26,7 +29,7 @@
         }
 
         button.remove {
-            color: $color--grey;
+            color: vars.$color--grey;
             font-size: 22px;
             line-height: $allowlist-item-height;
             background: transparent;
@@ -41,41 +44,41 @@
     width: 245px;
     height: 36px;
     border-radius: 4px;
-    border: solid 1px $color--dark-silver;
+    border: solid 1px vars.$color--dark-silver;
     padding: 0 10px;
-    color: $slate;
+    color: vars.$slate;
 
-    @include placeholder {
+    @include mixins.placeholder {
         width: 63px;
         height: 17px;
-        color: $grey-light;
+        color: vars.$grey-light;
     }
 }
 
 .allowlist-url.is-invalid-input {
-    border: solid 1px $red;
+    border: solid 1px vars.$red;
 }
 
 .allowlist-add {
     width: 120px;
     height: 30px;
     border-radius: 4px;
-    background-color: $blue;
+    background-color: vars.$blue;
     line-height: 1.5;
     text-align: center;
-    color: $white;
+    color: vars.$white;
     padding-top: 8px;
     margin-left: 7px;
     cursor: pointer;
 }
 
 .allowlist-add.is-disabled {
-    background-color: $silver;
-    color: $grey-light;
+    background-color: vars.$silver;
+    color: vars.$grey-light;
     cursor: default;
 }
 
 .allowlist-show-add {
     height: 17px;
-    color: $blue;
+    color: vars.$blue;
 }
diff --git a/shared/scss/views/_extension-page.scss b/shared/scss/views/_extension-page.scss
index 239ba9bf8..af005981a 100644
--- a/shared/scss/views/_extension-page.scss
+++ b/shared/scss/views/_extension-page.scss
@@ -1,3 +1,6 @@
+@use "../mixins";
+@use "../vars";
+
 .page-container {
     width: 400px;
     margin: 3em auto auto auto;
@@ -12,7 +15,7 @@
     width: 158px;
     height: 44px;
     margin-bottom: 23px;
-    @include ddg_logo();
+    @include mixins.ddg_logo();
 
     span {
         display: none;
@@ -35,7 +38,7 @@
 
 .options-content__gpc-enabled {
     margin: 20px 0 0;
-    border-top: 1px solid $platinum;
+    border-top: 1px solid vars.$platinum;
 
     h2 {
         padding: 20px 0 10px;
@@ -44,7 +47,7 @@
     p {
         font-weight: normal;
         line-height: 1.4;
-        color: $slate-light;
+        color: vars.$slate-light;
     }
 
     ul {
@@ -55,12 +58,12 @@
     li {
         font-weight: bold;
         padding: 0 0 2px 15px;
-        color: $slate-light;
+        color: vars.$slate-light;
     }
 
     li::before {
         content: '\2022';
-        color: $platinum-darker;
+        color: vars.$platinum-darker;
         font-weight: bold;
         font-size: 24px;
         position: absolute;