diff --git a/resources/css/app.scss b/resources/css/app.scss
index 75bbd92..99174e1 100644
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -1,26 +1,26 @@
 // Global Variables, Mixins, and Framework
-@import "global/variables";
-@import "global/mixins";
-@import "global/fonts";
-@import "global/typography";
-@import "global/framework";
+@use "global/variables";
+@use "global/mixins";
+@use "global/fonts";
+@use "global/typography";
+@use "global/framework";
 
 // Third Party Plugins
-@import "plugins/contact-form-7";
-@import "plugins/mce";
+@use "plugins/contact-form-7";
+@use "plugins/mce";
 
 // Sections
-@import "sections/header";
-@import "sections/footer";
+@use "sections/header";
+@use "sections/footer";
 
 // Components
-@import "components/forms";
-@import "components/button";
-@import "components/card";
+@use "components/forms";
+@use "components/button";
+@use "components/card";
 
 // Blocks
-@import "blocks/BadExample";
+@use "blocks/BadExample";
 
 // Page Styles
-@import "views/page";
+@use "views/page";
 
diff --git a/resources/css/components/_button.scss b/resources/css/components/_button.scss
index f238a5e..bde9eb3 100644
--- a/resources/css/components/_button.scss
+++ b/resources/css/components/_button.scss
@@ -1,3 +1,6 @@
+@use "../global/fonts";
+@use "../global/variables/colours";
+
 button {
   &%block,
   &.block {
@@ -19,11 +22,11 @@ input[type="submit"] {
 .button {
   display: inline-block;
   padding: 0.5em 1.25em;
-  border: 0.125em solid $black;
+  border: 0.125em solid colours.$black;
   border-radius: 0.25em;
-  background-color: $black;
-  color: $white;
-  font-family: $font;
+  background-color: colours.$black;
+  color: colours.$white;
+  font-family: fonts.$font;
   font-weight: 700;
   text-decoration: none;
   white-space: normal;
@@ -31,45 +34,45 @@ input[type="submit"] {
   transition: 300ms ease all;
 
   .knockout & {
-    background-color: $white;
-    border-color: $white;
+    background-color: colours.$white;
+    border-color: colours.$white;
     color: currentcolor;
   }
 
   &:hover,
   &:focus {
-    color: $white;
+    color: colours.$white;
     text-decoration: none;
-    background-color: rgba($black, 0.5);
-    border-color: rgba($black, 0.5);
+    background-color: rgba(colours.$black, 0.5);
+    border-color: rgba(colours.$black, 0.5);
 
     .knockout & {
-      background-color: rgba($white, 0.5);
-      border-color: rgba($white, 0.5);
+      background-color: rgba(colours.$white, 0.5);
+      border-color: rgba(colours.$white, 0.5);
       color: currentcolor;
     }
   }
 
   &.outline {
-    border-color: $black;
+    border-color: colours.$black;
     background-color: transparent;
-    color: $black;
+    color: colours.$black;
 
     &:hover,
     &:focus {
-      background-color: $black;
-      color: $white;
+      background-color: colours.$black;
+      color: colours.$white;
     }
 
     .knockout & {
       @media screen {
-        border-color: $white;
-        color: $white;
+        border-color: colours.$white;
+        color: colours.$white;
 
         &:hover,
         &:focus {
-          background-color: $white;
-          color: $black;
+          background-color: colours.$white;
+          color: colours.$black;
         }
       }
     }
diff --git a/resources/css/components/_forms.scss b/resources/css/components/_forms.scss
index 3ddb776..8387554 100644
--- a/resources/css/components/_forms.scss
+++ b/resources/css/components/_forms.scss
@@ -1,28 +1,32 @@
+@use "../global/fonts";
+@use "../global/variables/breakpoints";
+@use "../global/variables/colours";
+
 textarea {
   min-height: 10.375em;
 }
 
 input,
 textarea {
-  color: $grey;
+  color: colours.$grey;
   background: white;
   font-weight: 400;
   font-size: 1em;
-  font-family: $font;
+  font-family: fonts.$font;
   width: 100%;
   padding: 0.875em 1em;
   margin: 0 0 1em;
   // border-radius: 0.125em;
-  border: 0.0625em solid rgba($black, 0.1);
+  border: 0.0625em solid rgba(colours.$black, 0.1);
   outline: none;
   transition: all 300ms ease;
 
   &::placeholder {
-    color: $grey-light;
+    color: colours.$grey-light;
   }
 
   &:focus {
-    box-shadow: 0 0.25em 0.5em rgba($black, 0.1);
+    box-shadow: 0 0.25em 0.5em rgba(colours.$black, 0.1);
   }
 }
 
@@ -71,11 +75,11 @@ select {
     max-width: 100%;
     width: 100%;
     margin: 0;
-    font-family: $font;
+    font-family: fonts.$font;
   }
   /* stylelint-enable selector-class-pattern */
 
-  @media (min-width: $screen-sm) {
+  @media (min-width: breakpoints.$screen-sm) {
     &.half {
       flex: 0 0 calc(50% - 1em);
       max-width: calc(50% - 1em);
@@ -107,7 +111,7 @@ select {
     margin: 2em 0 0;
   }
 
-  @media (min-width: $screen-sm) {
+  @media (min-width: breakpoints.$screen-sm) {
     display: flex;
     flex-wrap: wrap;
 
@@ -164,8 +168,8 @@ select {
       }
 
       &-not-valid-tip {
-        background: $error;
-        color: $white;
+        background: colours.$error;
+        color: colours.$white;
         padding: 0.5em 1em;
         border-radius: 0 0 0.5em 0.5em;
         font-weight: 700;
@@ -177,11 +181,11 @@ select {
         width: calc(100% - 1em);
         flex: 0 0 calc(100% - 1em);
         text-align: center;
-        color: $white;
-        font-family: $font;
+        color: colours.$white;
+        font-family: fonts.$font;
         font-weight: 700;
-        background: $black;
-        border: 0.125em solid $white;
+        background: colours.$black;
+        border: 0.125em solid colours.$white;
         padding: 0.5em 1em;
         border-radius: 0.5em;
       }
@@ -207,7 +211,7 @@ select {
           display: block;
           width: 1.25em;
           height: 1.25em;
-          border: 0.125em solid $black;
+          border: 0.125em solid colours.$black;
           background: transparent;
           color: currentcolor;
 
@@ -250,15 +254,15 @@ select {
 
     &.sent {
       .wpcf7-response-output {
-        background: $success;
-        border-color: $white;
+        background: colours.$success;
+        border-color: colours.$white;
       }
     }
 
     &.invalid {
       .wpcf7-response-output {
-        background: $error;
-        border-color: $white;
+        background: colours.$error;
+        border-color: colours.$white;
       }
     }
 
@@ -277,7 +281,7 @@ select {
       .wpcf7 {
         &-checkbox {
           input[type="checkbox"] {
-            border-color: $white;
+            border-color: colours.$white;
           }
         }
       }
diff --git a/resources/css/global/_framework.scss b/resources/css/global/_framework.scss
index 73dcc17..e34c2db 100644
--- a/resources/css/global/_framework.scss
+++ b/resources/css/global/_framework.scss
@@ -1,4 +1,4 @@
-@import "framework/breakpoints";
-@import "framework/normalise";
-@import "framework/colours";
-@import "framework/spacing";
+@use "framework/breakpoints";
+@use "framework/normalise";
+@use "framework/colours";
+@use "framework/spacing";
diff --git a/resources/css/global/_mixins.scss b/resources/css/global/_mixins.scss
index 7bd4a3a..f52c188 100644
--- a/resources/css/global/_mixins.scss
+++ b/resources/css/global/_mixins.scss
@@ -1,4 +1,4 @@
-@import "mixins/linear-gradient";
-@import "mixins/text-contrast";
-@import "mixins/generate-colour-classes";
-@import "mixins/generate-button-classes";
+@use "mixins/linear-gradient";
+@use "mixins/text-contrast";
+@use "mixins/generate-colour-classes";
+@use "mixins/generate-button-classes";
diff --git a/resources/css/global/_typography.scss b/resources/css/global/_typography.scss
index a84bcb7..8cf8f4b 100644
--- a/resources/css/global/_typography.scss
+++ b/resources/css/global/_typography.scss
@@ -1,3 +1,8 @@
+@use "fonts";
+@use "variables/breakpoints";
+@use "variables/colours";
+@use "variables/spacing";
+
 .wysiwyg {
   *:first-child {
     margin-top: 0;
@@ -14,9 +19,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: $primary;
+  color: colours.$primary;
   font-weight: 700;
-  font-family: $font;
+  font-family: fonts.$font;
   line-height: 1.1em;
   margin: 1.5em 0 0.25em;
   padding: 0;
@@ -27,7 +32,7 @@ h6 {
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
     }
   }
 }
@@ -43,7 +48,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }
 
-@media (min-width: $screen-sm) {
+@media (min-width: breakpoints.$screen-sm) {
   h1 { font-size: 2.5em; }
   h2 { font-size: 2em; }
   h3 { font-size: 1.5em; }
@@ -58,8 +63,8 @@ p,
 li,
 td,
 label {
-  color: $grey;
-  font-family: $font;
+  color: colours.$grey;
+  font-family: fonts.$font;
   font-weight: 400;
   line-height: 1.5em;
   margin: 0 0 0.8em;
@@ -67,30 +72,30 @@ label {
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
     }
   }
 }
 
 a {
-  color: $primary;
+  color: colours.$primary;
   text-decoration: none;
   outline: none;
   transition: all 300ms ease;
 
   &:hover,
   &:focus {
-    color: $primary-dark;
+    color: colours.$primary-dark;
     text-decoration: none;
   }
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
 
       &:hover,
       &:focus {
-        color: $primary-light;
+        color: colours.$primary-light;
       }
     }
   }
@@ -126,12 +131,12 @@ ol {
 hr {
   margin: 1.5em auto 2em;
   height: 0;
-  border: 0 solid $grey-light;
-  border-width: $borderThin 0 0;
+  border: 0 solid colours.$grey-light;
+  border-width: spacing.$borderThin 0 0;
 
   @media screen {
     .knockout & {
-      border-color: $white;
+      border-color: colours.$white;
     }
   }
 }
diff --git a/resources/css/global/_variables.scss b/resources/css/global/_variables.scss
index 1d60147..eed5e1c 100644
--- a/resources/css/global/_variables.scss
+++ b/resources/css/global/_variables.scss
@@ -1,3 +1,3 @@
-@import "variables/colours";
-@import "variables/breakpoints";
-@import "variables/spacing";
+@use "variables/colours";
+@use "variables/breakpoints";
+@use "variables/spacing";
diff --git a/resources/css/global/framework/_breakpoints.scss b/resources/css/global/framework/_breakpoints.scss
index 234335e..fe0232f 100644
--- a/resources/css/global/framework/_breakpoints.scss
+++ b/resources/css/global/framework/_breakpoints.scss
@@ -1,4 +1,6 @@
-@each $label, $value in $breakpoints {
+@use "../variables/breakpoints";
+
+@each $label, $value in breakpoints.$breakpoints {
   .min-#{$label} {
     @media (min-width: $value) {
       display: none;
diff --git a/resources/css/global/framework/_colours.scss b/resources/css/global/framework/_colours.scss
index 471e61b..f56475c 100644
--- a/resources/css/global/framework/_colours.scss
+++ b/resources/css/global/framework/_colours.scss
@@ -1,9 +1,13 @@
+@use "../mixins/generate-button-classes";
+@use "../mixins/generate-colour-classes";
+@use "../variables/colours";
+
 ::selection {
-  color: $white;
-  background: $primary;
+  color: colours.$white;
+  background: colours.$primary;
 }
 
-@each $color, $hex in $colors {
-  @include generate_colour_classes($color, $hex);
-  @include generate_button_colors($color, $hex);
+@each $color, $hex in colours.$colors {
+  @include generate-colour-classes.generate_colour_classes($color, $hex);
+  @include generate-button-classes.generate_button_colors($color, $hex);
 }
diff --git a/resources/css/global/framework/_normalise.scss b/resources/css/global/framework/_normalise.scss
index b6df21d..0633833 100644
--- a/resources/css/global/framework/_normalise.scss
+++ b/resources/css/global/framework/_normalise.scss
@@ -1,3 +1,5 @@
+@use "../variables/colours";
+
 * {
   box-sizing: border-box;
   backface-visibility: hidden; // removes jagged edges on rotated elements
@@ -11,7 +13,7 @@ body,
 html {
   margin: 0;
   padding: 0;
-  background: $white;
+  background: colours.$white;
 }
 
 .visually-hidden {
diff --git a/resources/css/global/framework/_spacing.scss b/resources/css/global/framework/_spacing.scss
index de7ef6e..62b0de3 100644
--- a/resources/css/global/framework/_spacing.scss
+++ b/resources/css/global/framework/_spacing.scss
@@ -1,23 +1,26 @@
+@use "../variables/colours";
+@use "../variables/spacing";
+
 .brand {
   display: block;
-  width: $brandWidth;
-  height: $brandHeight;
+  width: spacing.$brandWidth;
+  height: spacing.$brandHeight;
 
   svg,
   img {
     display: block;
-    width: $brandWidth;
-    height: $brandHeight;
+    width: spacing.$brandWidth;
+    height: spacing.$brandHeight;
   }
 
   .knockout & {
     @media screen {
       .fill-primary {
-        fill: $white;
+        fill: colours.$white;
       }
 
       .fill-grey {
-        fill: rgba($white, 0.8);
+        fill: rgba(colours.$white, 0.8);
       }
     }
   }
@@ -27,28 +30,28 @@
   width: 90%;
   margin: auto;
 
-  &-large { max-width: $containerLarge; }
-  &-medium { max-width: $containerMedium; }
-  &-small { max-width: $containerSmall; }
-  &-narrow { max-width: $containerNarrow; }
+  &-large { max-width: spacing.$containerLarge; }
+  &-medium { max-width: spacing.$containerMedium; }
+  &-small { max-width: spacing.$containerSmall; }
+  &-narrow { max-width: spacing.$containerNarrow; }
 }
 
 .section {
-  padding: $sectionMedium 0;
+  padding: spacing.$sectionMedium 0;
 
-  &-small { padding: $sectionSmall 0; }
-  &-medium { padding: $sectionMedium 0; }
-  &-large { padding: $sectionLarge 0; }
+  &-small { padding: spacing.$sectionSmall 0; }
+  &-medium { padding: spacing.$sectionMedium 0; }
+  &-large { padding: spacing.$sectionLarge 0; }
 
   &-zero-top { padding-top: 0; }
   &-zero-bottom { padding-bottom: 0; }
 }
 
 .inner {
-  padding: $innerMedium;
+  padding: spacing.$innerMedium;
 
-  &-small { padding: $innerSmall; }
-  &-large { padding: $innerLarge; }
+  &-small { padding: spacing.$innerSmall; }
+  &-large { padding: spacing.$innerLarge; }
 
   &-zero-x {
     padding-left: 0;
@@ -62,7 +65,7 @@
 }
 
 .rounded {
-  border-radius: $borderRadius;
+  border-radius: spacing.$borderRadius;
 
   &-top {
     border-bottom-right-radius: 0;
@@ -77,12 +80,12 @@
 
 .border {
   border-style: solid;
-  border-width: $borderWidth;
+  border-width: spacing.$borderWidth;
 
   &-thin { border-width: 0.0625em; }
-  &-regular { border-width: $borderWidth; }
-  &-thick { border-width: $borderThick; }
-  &-thicker { border-width: $borderThicker; }
+  &-regular { border-width: spacing.$borderWidth; }
+  &-thick { border-width: spacing.$borderThick; }
+  &-thicker { border-width: spacing.$borderThicker; }
 
   &-top {
     border-right-width: 0;
diff --git a/resources/css/global/mixins/_generate-button-classes.scss b/resources/css/global/mixins/_generate-button-classes.scss
index 2d0aca5..e563727 100644
--- a/resources/css/global/mixins/_generate-button-classes.scss
+++ b/resources/css/global/mixins/_generate-button-classes.scss
@@ -1,3 +1,5 @@
+@use "../variables/colours";
+
 @use "sass:color";
 
 @mixin generate_button_colors($name, $hex) {
@@ -10,13 +12,13 @@
 
   @each $button in $buttons {
     #{$button}.#{$name} {
-      color: $white;
+      color: colours.$white;
       background: $hex;
       border-color: $hex;
 
       &:hover,
       &:focus {
-        color: $white;
+        color: colours.$white;
         background: color.adjust($hex, $lightness: 10%);
         border-color: color.adjust($hex, $lightness: 10%);
       }
diff --git a/resources/css/global/mixins/_generate-colour-classes.scss b/resources/css/global/mixins/_generate-colour-classes.scss
index 8b381f4..932fbbd 100644
--- a/resources/css/global/mixins/_generate-colour-classes.scss
+++ b/resources/css/global/mixins/_generate-colour-classes.scss
@@ -1,3 +1,5 @@
+@use "text-contrast";
+
 @use "sass:color";
 
 @mixin generate_colour_classes($name, $hex) {
@@ -18,7 +20,7 @@
       background-color: $hex;
 
       ::selection {
-        @include text_contrast(color.invert($hex));
+        @include text-contrast.text_contrast(color.invert($hex));
         background: color.invert($hex);
       }
     }
diff --git a/resources/css/global/mixins/_text-contrast.scss b/resources/css/global/mixins/_text-contrast.scss
index ea29aa8..a9b1db2 100644
--- a/resources/css/global/mixins/_text-contrast.scss
+++ b/resources/css/global/mixins/_text-contrast.scss
@@ -1,11 +1,13 @@
+@use "../variables/colours";
+
 @use "sass:color";
 @use "sass:math";
 
-@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.667) {
-  $brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000));
-  $light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000));
+@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
+  $brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
+  $light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
 
-  @if abs($brightness) < (math.div($light-color, $cutoff)) {
+  @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
     color: $light;
   }
 
diff --git a/resources/css/global/variables/_colours.scss b/resources/css/global/variables/_colours.scss
index 8fab970..2c8e78f 100644
--- a/resources/css/global/variables/_colours.scss
+++ b/resources/css/global/variables/_colours.scss
@@ -8,8 +8,8 @@ $alert: #eed202;
 //== Brand Colours
 $primary: #337ab7;
 $secondary: #5bc0de;
-$tertiary: invert($primary);
-$quaternary: invert($secondary);
+$tertiary: color.invert($primary);
+$quaternary: color.invert($secondary);
 
 //== Primary Tints
 $primary-darkest: color.adjust($primary, $lightness: -30%);
diff --git a/resources/css/plugins/_contact-form-7.scss b/resources/css/plugins/_contact-form-7.scss
index eb8d9ec..9bee6a0 100644
--- a/resources/css/plugins/_contact-form-7.scss
+++ b/resources/css/plugins/_contact-form-7.scss
@@ -1,19 +1,21 @@
+@use "../global/variables/colours";
+
 .wpcf7 .screen-reader-response {
   display: none;
 }
 
 .wpcf7-response-output {
-  @extend p;
-  @extend .container;
-  @extend .container-narrow;
+  @extend p !optional;
+  @extend .container !optional;
+  @extend .container-narrow !optional;
 
   padding: 1em 0 0;
   margin-top: 2em;
-  border: 1px solid $grey-light;
+  border: 1px solid colours.$grey-light;
   border-width: 1px 0 0;
 
   .knockout & {
-    border-color: rgba($white, 0.3);
+    border-color: rgba(colours.$white, 0.3);
   }
 }
 
diff --git a/resources/css/plugins/_mce.scss b/resources/css/plugins/_mce.scss
index 5f64b30..6505c75 100644
--- a/resources/css/plugins/_mce.scss
+++ b/resources/css/plugins/_mce.scss
@@ -1,12 +1,14 @@
+@use "../global/variables/colours";
+
 #mce-responses {
   .response {
     padding: 0 0 1em;
     margin: 0 0 1em;
     font-size: 0.875em;
-    border-bottom: 1px solid $grey-lighter;
+    border-bottom: 1px solid colours.$grey-lighter;
   }
 }
 
 .knockout #mce-responses .response {
-  border-bottom-color: rgba($white, 0.3);
+  border-bottom-color: rgba(colours.$white, 0.3);
 }