diff --git a/src/assets/css/clearbutton.css b/src/assets/css/clearbutton.scss
similarity index 100%
rename from src/assets/css/clearbutton.css
rename to src/assets/css/clearbutton.scss
diff --git a/src/assets/css/detailtable.css b/src/assets/css/detailtable.scss
similarity index 100%
rename from src/assets/css/detailtable.css
rename to src/assets/css/detailtable.scss
diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.scss
similarity index 100%
rename from src/assets/css/flexstyles.css
rename to src/assets/css/flexstyles.scss
diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.scss
similarity index 66%
rename from src/assets/css/fonts.css
rename to src/assets/css/fonts.scss
index 6e87f11d9d..32dc2e7bd6 100644
--- a/src/assets/css/fonts.css
+++ b/src/assets/css/fonts.scss
@@ -1,29 +1,26 @@
-html {
+@mixin font($weight: null, $size: null) {
     font-family: "Noto Sans", sans-serif;
+    font-weight: $weight;
+    font-size: $size;
+}
+
+html {
+    @include font;
     text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }
 
-h1,
-h2,
-h3 {
-    font-family: "Noto Sans", sans-serif;
-}
-
 h1 {
-    font-weight: 400;
-    font-size: 1.8em;
+    @include font(400, 1.8em);
 }
 
 h2 {
-    font-weight: 400;
-    font-size: 1.5em;
+    @include font(400, 1.5em);
 }
 
 h3 {
-    font-weight: 400;
-    font-size: 1.17em;
+    @include font(400, 1.17em);
 }
 
 .layout-tv {
diff --git a/src/assets/css/fonts.sized.css b/src/assets/css/fonts.sized.css
deleted file mode 100644
index f60a94f236..0000000000
--- a/src/assets/css/fonts.sized.css
+++ /dev/null
@@ -1,31 +0,0 @@
-h1 {
-    font-weight: 400;
-    font-size: 1.8em;
-}
-
-.layout-desktop h1 {
-    font-size: 2em;
-}
-
-h2 {
-    font-weight: 400;
-    font-size: 1.5em;
-}
-
-h3 {
-    font-weight: 400;
-    font-size: 1.17em;
-}
-
-@media all and (min-height: 720px) {
-    html {
-        font-size: 20px;
-    }
-}
-
-/* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
-@media all and (min-height: 1000px) {
-    html {
-        font-size: 27px;
-    }
-}
diff --git a/src/assets/css/fonts.sized.scss b/src/assets/css/fonts.sized.scss
new file mode 100644
index 0000000000..1cec58a4a6
--- /dev/null
+++ b/src/assets/css/fonts.sized.scss
@@ -0,0 +1,31 @@
+@mixin header-font($size: null) {
+    font-weight: 400;
+    font-size: $size;
+}
+
+html {
+    @media all and (min-height: 720px) {
+        font-size: 20px;
+    }
+
+    /* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
+    @media all and (min-height: 1000px) {
+        font-size: 27px;
+    }
+}
+
+h1 {
+    @include header-font(1.8em);
+
+    .layout-desktop & {
+        font-size: 2em;
+    }
+}
+
+h2 {
+    @include header-font(1.8em);
+}
+
+h3 {
+    @include header-font(1.17em);
+}
diff --git a/src/assets/css/ios.css b/src/assets/css/ios.scss
similarity index 100%
rename from src/assets/css/ios.css
rename to src/assets/css/ios.scss
diff --git a/src/assets/css/livetv.css b/src/assets/css/livetv.scss
similarity index 63%
rename from src/assets/css/livetv.css
rename to src/assets/css/livetv.scss
index 695adff8c5..032bcddf48 100644
--- a/src/assets/css/livetv.css
+++ b/src/assets/css/livetv.scss
@@ -2,8 +2,8 @@
     padding-bottom: 15em;
 }
 
-@media all and (min-width: 62.5em) {
-    #guideTab {
+#guideTab {
+    @media all and (min-width: 62.5em) {
         padding-left: 0.5em;
     }
 }
diff --git a/src/assets/css/site.css b/src/assets/css/site.scss
similarity index 83%
rename from src/assets/css/site.css
rename to src/assets/css/site.scss
index 38e056df89..3d4ea7da0e 100644
--- a/src/assets/css/site.css
+++ b/src/assets/css/site.scss
@@ -1,14 +1,19 @@
-body,
-html {
+@mixin fullpage {
     margin: 0;
     padding: 0;
     height: 100%;
 }
 
-.layout-mobile,
-.layout-tv {
-    -webkit-touch-callout: none;
-    user-select: none;
+html {
+    @include fullpage;
+    line-height: 1.35;
+}
+
+body {
+    @include fullpage;
+    overflow-x: hidden;
+    background-color: transparent !important;
+    -webkit-font-smoothing: antialiased;
 }
 
 .clipForScreenReader {
@@ -36,14 +41,10 @@ html {
     contain: strict;
 }
 
-html {
-    line-height: 1.35;
-}
-
-body {
-    overflow-x: hidden;
-    background-color: transparent !important;
-    -webkit-font-smoothing: antialiased;
+.layout-mobile,
+.layout-tv {
+    -webkit-touch-callout: none;
+    user-select: none;
 }
 
 .mainAnimatedPage {
@@ -58,7 +59,7 @@ body {
     overflow-y: hidden !important;
 }
 
-div[data-role=page] {
+div[data-role="page"] {
     outline: 0;
 }
 
@@ -71,10 +72,10 @@ div[data-role=page] {
     padding-left: 0.15em;
     font-weight: 400;
     white-space: normal !important;
-}
 
-.fieldDescription + .fieldDescription {
-    margin-top: 0.3em;
+    + .fieldDescription {
+        margin-top: 0.3em;
+    }
 }
 
 .content-primary,
@@ -85,9 +86,14 @@ div[data-role=page] {
     padding-bottom: 5em !important;
 }
 
-@media all and (min-width: 50em) {
-    .readOnlyContent,
-    form {
+.readOnlyContent {
+    @media all and (min-width: 50em) {
+        max-width: 54em;
+    }
+}
+
+form {
+    @media all and (min-width: 50em) {
         max-width: 54em;
     }
 }
@@ -107,14 +113,14 @@ div[data-role=page] {
 .headroom {
     will-change: transform;
     transition: transform 200ms linear;
-}
 
-.headroom--pinned {
-    transform: translateY(0%);
-}
+    &--pinned {
+        transform: translateY(0%);
+    }
 
-.headroom--unpinned {
-    transform: translateY(-100%);
+    &--unpinned {
+        transform: translateY(-100%);
+    }
 }
 
 .drawerContent {