From ffefb72305f00bdc6622abb2fae054e0352cbdaa Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Sat, 11 Aug 2018 11:17:55 -0400
Subject: [PATCH] Switch from SASS variables to CSS variables for most styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`.
---
 assets/stylesheets/components/_app.scss       |  10 +-
 assets/stylesheets/components/_content.scss   |  52 +++----
 assets/stylesheets/components/_fail.scss      |   2 +-
 assets/stylesheets/components/_header.scss    |  44 +++---
 assets/stylesheets/components/_mobile.scss    |   4 +-
 assets/stylesheets/components/_notice.scss    |  10 +-
 assets/stylesheets/components/_notif.scss     |  24 +--
 assets/stylesheets/components/_page.scss      |   8 +-
 assets/stylesheets/components/_path.scss      |  12 +-
 assets/stylesheets/components/_prism.scss     |   4 +-
 assets/stylesheets/components/_settings.scss  |  22 +--
 assets/stylesheets/components/_sidebar.scss   |  64 ++++----
 assets/stylesheets/global/_base.scss          |  62 ++++----
 assets/stylesheets/global/_classes.scss       |  40 ++---
 assets/stylesheets/global/_print.scss         |   4 +-
 .../stylesheets/global/_variables-dark.scss   | 140 +++++++++---------
 assets/stylesheets/global/_variables.scss     | 139 ++++++++---------
 assets/stylesheets/pages/_angularjs.scss      |   2 +-
 assets/stylesheets/pages/_async.scss          |   4 +-
 assets/stylesheets/pages/_bootstrap.scss      |   2 +-
 assets/stylesheets/pages/_c.scss              |   4 +-
 assets/stylesheets/pages/_clojure.scss        |   2 +-
 assets/stylesheets/pages/_d.scss              |   6 +-
 assets/stylesheets/pages/_dojo.scss           |   2 +-
 assets/stylesheets/pages/_ember.scss          |   4 +-
 assets/stylesheets/pages/_erlang.scss         |   2 +-
 assets/stylesheets/pages/_jquery.scss         |   4 +-
 assets/stylesheets/pages/_love.scss           |   4 +-
 assets/stylesheets/pages/_mdn.scss            |   6 +-
 assets/stylesheets/pages/_meteor.scss         |   4 +-
 assets/stylesheets/pages/_npm.scss            |   2 +-
 assets/stylesheets/pages/_phalcon.scss        |   2 +-
 assets/stylesheets/pages/_php.scss            |   4 +-
 assets/stylesheets/pages/_postgres.scss       |   2 +-
 assets/stylesheets/pages/_rdoc.scss           |   6 +-
 assets/stylesheets/pages/_react_native.scss   |   2 +-
 assets/stylesheets/pages/_redis.scss          |   4 +-
 assets/stylesheets/pages/_rfc.scss            |   2 +-
 assets/stylesheets/pages/_sphinx.scss         |   4 +-
 assets/stylesheets/pages/_sphinx_simple.scss  |   2 +-
 assets/stylesheets/pages/_support_tables.scss |   2 +-
 assets/stylesheets/pages/_yard.scss           |   2 +-
 assets/stylesheets/pages/_yii.scss            |   2 +-
 43 files changed, 368 insertions(+), 355 deletions(-)

diff --git a/assets/stylesheets/components/_app.scss b/assets/stylesheets/components/_app.scss
index ee76fe2f..96e09938 100644
--- a/assets/stylesheets/components/_app.scss
+++ b/assets/stylesheets/components/_app.scss
@@ -1,6 +1,6 @@
-html._booting { background: $contentBackground; }
+html._booting { background: var(--contentBackground); }
 body._max-width { background: none; }
-html._booting body._max-width { background: $documentBackground; }
+html._booting body._max-width { background: var(--documentBackground); }
 
 ._app {
   position: relative;
@@ -15,8 +15,8 @@ html._booting body._max-width { background: $documentBackground; }
 
   ._max-width & {
     margin: 0 auto;
-    max-width: $maxWidth;
-    background: $contentBackground;
-    box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
+    max-width: var(--maxWidth);
+    background: var(--contentBackground);
+    box-shadow: 1px 0 var(--headerBorder), -1px 0 var(--headerBorder);
   }
 }
diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss
index 18f2e51d..fe8a497a 100644
--- a/assets/stylesheets/components/_content.scss
+++ b/assets/stylesheets/components/_content.scss
@@ -4,13 +4,13 @@
 
 ._container {
   position: relative;
-  z-index: $contentZ;
+  z-index: var(--contentZ);
   height: 100%;
-  margin-left: $sidebarWidth;
+  margin-left: var(--sidebarWidth);
   pointer-events: none;
   @extend %border-box;
 
-  @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }
+  @media #{$mediumScreen} { margin-left: var(--sidebarMediumWidth); }
 
   ._sidebar-hidden & { margin-left: 0; }
   body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }
@@ -30,7 +30,7 @@
   ._sidebar-hidden &:before {
     content: '';
     display: block;
-    margin-top: $headerHeight;
+    margin-top: var(--headerHeight);
   }
 
   ._overlay-scrollbars & { padding-left: .625rem; }
@@ -54,7 +54,7 @@
   font-size: 4rem;
   font-weight: 300;
   letter-spacing: -.125rem;
-  color: $loadingText;
+  color: var(--loadingText);
   text-align: center;
   cursor: default;
 }
@@ -68,7 +68,7 @@
 //
 
 ._splash-title {
-  color: $splashText;
+  color: var(--splashText);
   @extend %loading, %user-select-none;
 }
 
@@ -88,7 +88,7 @@
   min-height: calc(100vh - 2.375rem);
 
   ._sidebar-hidden & {
-    min-height: calc(100vh - 2.375rem - #{$headerHeight});
+    min-height: calc(100vh - 2.375rem - var(--headerHeight));
   }
 }
 
@@ -140,12 +140,12 @@
 
 ._error-text {
   margin: 0 0 1rem;
-  color: $textColorLight;
+  color: var(--textColorLight);
 }
 
 ._error-links {
   font-size: 1rem;
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
 }
 
 ._error-link { padding: 0 .5rem; }
@@ -167,7 +167,7 @@
     height: 1px;
     margin-top: .25rem;
     margin-left: 1rem;
-    background: $boxBorderLight;
+    background: var(--boxBorderLight);
   }
 }
 
@@ -197,7 +197,7 @@
 ._toc-title {
   margin: 0 0 .5rem;
   font-size: inherit;
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
 }
 
 ._toc-list {
@@ -252,7 +252,7 @@
 ._docs-size {
   text-align: right;
 
-  > small { color: $textColorLight; }
+  > small { color: var(--textColorLight); }
 }
 
 ._docs-tools {
@@ -285,7 +285,7 @@
     padding: 0 .75rem;
   }
   ._btn-link:not(._show) { display: none; }
-  ._btn-link._show ~ ._btn-link._show { border-left: 1px solid $boxBorder; }
+  ._btn-link._show ~ ._btn-link._show { border-left: 1px solid var(--boxBorder); }
 }
 
 //
@@ -297,7 +297,7 @@
     position: relative;
     padding-left: 10em;
     font-size: .8125rem;
-    color: $textColorLight;
+    color: var(--textColorLight);
 
     + ._news-row { margin-top: 1em; }
   }
@@ -305,7 +305,7 @@
   ._news-title {
     display: block;
     font-size: .875rem;
-    color: $textColor;
+    color: var(--textColor);
   }
 
   ._news-date {
@@ -372,12 +372,12 @@
 // Utilities
 //
 
-._bold { font-weight: $boldFontWeight; }
+._bold { font-weight: var(--boldFontWeight); }
 ._note { @extend %note; }
 ._note-green { @extend %note-green; }
 ._label { @extend %label; }
 ._code { @extend %code; }
-._highlight { background: $highlightBackground !important; }
+._highlight { background: var(--highlightBackground) !important; }
 
 ._table { width: 100%; }
 ._mobile ._table { overflow-x: auto; }
@@ -419,15 +419,15 @@
   line-height: normal;
   white-space: nowrap;
   padding: .375rem .675rem;
-  background-image: linear-gradient(lighten($boxBackground, 4%), darken($boxBackground, 2%));
-  border: 1px solid $boxBorder;
+  background-image: linear-gradient(lighten(var(--boxBackground), 4%), darken(var(--boxBackground), 2%));
+  border: 1px solid var(--boxBorder);
   border-radius: 3px;
-  box-shadow: 0 1px rgba($boxBorder, .08);
+  box-shadow: 0 1px rgba(var(--boxBorder), .08);
   cursor: pointer;
 
   &:active {
-    background-color: $boxBackground;
-    box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px $boxBorder;
+    background-color: var(--boxBackground);
+    box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder);
   }
 }
 
@@ -447,18 +447,18 @@
 
 ._btn-link {
   line-height: inherit;
-  color: $linkColor;
-  text-decoration: $linkTextDecoration;
+  color: var(--linkColor);
+  text-decoration: var(--linkTextDecoration);
 
   &:hover {
-    color: $linkColorHover;
+    color: var(--linkColorHover);
     text-decoration: underline;
   }
 }
 
 ._reset-btn,
 ._reset-btn:hover {
-  color: $textColorRed;
+  color: var(--textColorRed);
 }
 
 ._github-btn {
diff --git a/assets/stylesheets/components/_fail.scss b/assets/stylesheets/components/_fail.scss
index c1cf4653..7fb8d192 100644
--- a/assets/stylesheets/components/_fail.scss
+++ b/assets/stylesheets/components/_fail.scss
@@ -23,7 +23,7 @@
 ._fail-title {
   margin: 0 0 1rem;
   font-size: 1rem;
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
 }
 
 ._fail-text, ._fail-list {
diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss
index 37f9268d..225fbce4 100644
--- a/assets/stylesheets/components/_header.scss
+++ b/assets/stylesheets/components/_header.scss
@@ -4,20 +4,20 @@
 
 ._header {
   position: absolute;
-  z-index: $headerZ;
+  z-index: var(--headerZ);
   top: 0;
   left: 0;
   display: -ms-flexbox;
   display: flex;
-  width: $sidebarWidth;
-  height: $headerHeight;
-  background: $headerBackground;
-  border-bottom: 1px solid $headerBorder;
-  border-right: 1px solid $headerBorder;
+  width: var(--sidebarWidth);
+  height: var(--headerHeight);
+  background: var(--headerBackground);
+  border-bottom: 1px solid var(--headerBorder);
+  border-right: 1px solid var(--headerBorder);
   @extend %border-box;
   @extend %user-select-none;
 
-  @media #{$mediumScreen} { width: $sidebarMediumWidth; }
+  @media #{$mediumScreen} { width: var(--sidebarMediumWidth); }
 }
 
 ._header-left {
@@ -35,7 +35,7 @@
   flex: 0 0 auto;
   width: 2.25rem;
   height: 100%;
-  color: $textColorLight;
+  color: var(--textColorLight);
   text-align: center;
 
   &[hidden] { display: none; }
@@ -67,8 +67,8 @@
   word-wrap: normal;
   overflow-wrap: normal;
   font-size: .875rem;
-  background: $contentBackground;
-  border: 1px solid $headerBorder;
+  background: var(--contentBackground);
+  border: 1px solid var(--headerBorder);
   border-radius: 3px;
   box-shadow: -1px 1px 1px rgba(black, .05);
   transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 1ms;
@@ -98,10 +98,10 @@
   margin: 0;
   line-height: 1.5rem;
   font-size: 1rem;
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
   letter-spacing: -.5px;
-  background: $sidebarBackground;
-  border-bottom: 1px solid $sidebarBorder;
+  background: var(--sidebarBackground);
+  border-bottom: 1px solid var(--sidebarBorder);
   border-radius: 2px 2px 0 0;
 }
 
@@ -109,7 +109,7 @@
 ._menu-title-link:hover {
   display: block;
   padding: .5rem 1rem;
-  color: $focusText;
+  color: var(--focusText);
   text-decoration: none;
 }
 
@@ -121,9 +121,9 @@
   text-decoration: none;
 
   &:hover {
-    color: $focusText;
+    color: var(--focusText);
     text-decoration: none;
-    background: $sidebarBackground;
+    background: var(--sidebarBackground);
   }
 
   &:last-child { border-radius: 0 0 2px 2px; }
@@ -166,21 +166,21 @@
   height: 100%;
   padding: 0 .75rem 1px 1.75rem;
   font-size: .875rem;
-  background: $contentBackground;
+  background: var(--contentBackground);
   border: 1px solid;
-  border-color: darken($headerBorder, 2%);
+  border-color: darken(var(--headerBorder), 2%);
   border-radius: 3px;
 
   &:focus {
     outline: 0;
     @if $inputFocusBorder {
-      border-color: $inputFocusBorder;
-      box-shadow: 0 0 1px $inputFocusBorder;
+      border-color: var(--inputFocusBorder);
+      box-shadow: 0 0 1px var(--inputFocusBorder);
     }
   }
 
   &[disabled] {
-    background: $sidebarBackground;
+    background: var(--sidebarBackground);
     cursor: not-allowed;
   }
 }
@@ -222,7 +222,7 @@
   line-height: 1.25rem;
   max-width: 50%;
   font-size: .8125rem;
-  color: $textColorLight;
+  color: var(--textColorLight);
   background: darken($headerBackground, 5%);
   border-radius: 2px;
   @extend %truncate-text;
diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss
index 34ad7dbe..bdfe01fd 100644
--- a/assets/stylesheets/components/_mobile.scss
+++ b/assets/stylesheets/components/_mobile.scss
@@ -4,7 +4,7 @@
 
 ._mobile {
   font-size: 100%;
-  background: $contentBackground;
+  background: var(--contentBackground);
 
   ._hide-on-mobile { display: none; }
 
@@ -18,7 +18,7 @@
 
   ._container {
     margin: 0;
-    padding-top: $headerHeight;
+    padding-top: var(--headerHeight);
   }
 
   ._content {
diff --git a/assets/stylesheets/components/_notice.scss b/assets/stylesheets/components/_notice.scss
index 0dba80ae..871d088c 100644
--- a/assets/stylesheets/components/_notice.scss
+++ b/assets/stylesheets/components/_notice.scss
@@ -1,15 +1,15 @@
 ._notice {
   position: absolute;
-  z-index: $noticeZ;
+  z-index: var(--noticeZ);
   bottom: 0;
-  left: $sidebarWidth;
+  left: var(--sidebarWidth);
   right: 0;
   height: 2.5rem;
   padding: 0 1.25rem;
-  background: $noticeBackground;
-  box-shadow: inset 0 1px $noticeBorder;
+  background: var(--noticeBackground);
+  box-shadow: inset 0 1px var(--noticeBorder);
 
-  @media #{$mediumScreen} { left: $sidebarMediumWidth; }
+  @media #{$mediumScreen} { left: var(--sidebarMediumWidth); }
 
   ._sidebar-hidden & { left: 0; }
 
diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss
index a47d396d..dd23c43a 100644
--- a/assets/stylesheets/components/_notif.scss
+++ b/assets/stylesheets/components/_notif.scss
@@ -7,9 +7,9 @@
   max-width: 90%;
   padding: .625rem 1rem;
   font-size: .75rem;
-  color: $notifColor;
-  background: $notifBackground;
-  border: $notifBorder;
+  color: var(--notifColor);
+  background: var(--notifBackground);
+  border: var(--notifBorder);
   border-radius: .25rem;
   transition: opacity .2s;
   opacity: 0;
@@ -30,7 +30,7 @@
 
 ._notif-info {
   float: right;
-  color: $notifColorLight;
+  color: var(--notifColorLight);
 }
 
 ._notif-link,
@@ -69,13 +69,13 @@
   &::-webkit-scrollbar { width: 10px !important; }
 
   &::-webkit-scrollbar-track {
-    background: $notifBackground !important;
+    background: var(--notifBackground) !important;
     border: 0 !important;
     border-radius: 5px !important;
   }
 
   &::-webkit-scrollbar-thumb {
-    border: 3px solid $notifBackground !important;
+    border: 3px solid var(--notifBackground) !important;
 
     &:hover, &:active { border-width: 2px !important; }
   }
@@ -90,7 +90,7 @@
   > ._news-row {
     line-height: 1.125rem;
     font-size: .6875rem;
-    color: $notifColorLight;
+    color: var(--notifColorLight);
     margin-bottom: .25rem;
 
     + ._news-row { margin-top: .625rem; }
@@ -107,7 +107,7 @@
   ._news-date {
     float: right;
     margin-left: 1rem;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
   }
 
   code {
@@ -128,9 +128,9 @@
 }
 
 ._notif-tip {
-  color: $textColor;
-  background: $tipBackground;
-  border: $tipBorder;
+  color: var(--textColor);
+  background: var(--tipBackground);
+  border: var(--tipBorder);
 
-  ._notif-info { color: $textColorLight; }
+  ._notif-info { color: var(--textColorLight); }
 }
diff --git a/assets/stylesheets/components/_page.scss b/assets/stylesheets/components/_page.scss
index 99771443..60a970b9 100644
--- a/assets/stylesheets/components/_page.scss
+++ b/assets/stylesheets/components/_page.scss
@@ -23,7 +23,7 @@
     max-width: 100%;
     margin-bottom: 1em;
     padding: 1px;
-    border: 1px dotted $boxBorder;
+    border: 1px dotted var(--boxBorder);
     border-radius: 3px;
     @extend %border-box;
   }
@@ -50,7 +50,7 @@
   display: inline-block;
   vertical-align: top;
   padding: 0 .5rem;
-  background: $contentBackground;
+  background: var(--contentBackground);
   @extend %internal-link;
 
   & + & { margin-left: .75rem; }
@@ -66,7 +66,7 @@
   clear: both;
   margin: 2rem 0 1.5rem;
   font-size: .75rem;
-  color: $textColorLight;
+  color: var(--textColorLight);
   text-align: center;
   -webkit-font-smoothing: subpixel-antialiased;
 
@@ -78,7 +78,7 @@
   display: inline-block;
   margin: 0;
   padding: .25rem .75rem;
-  background: $labelBackground;
+  background: var(--labelBackground);
   border-radius: 3px;
 }
 
diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss
index 1d68936f..ec01fefb 100644
--- a/assets/stylesheets/components/_path.scss
+++ b/assets/stylesheets/components/_path.scss
@@ -1,17 +1,17 @@
 ._path {
   position: absolute;
-  z-index: $noticeZ - 1;
+  z-index: var(--headerZ);
   bottom: 0;
-  left: $sidebarWidth;
+  left: var(--sidebarWidth);
   right: 0;
   height: 2rem;
   line-height: 2rem;
   padding: 0 .375rem;
   font-size: .875rem;
-  background: $pathBackground;
-  box-shadow: inset 0 1px $pathBorder;
+  background: var(--pathBackground);
+  box-shadow: inset 0 1px var(--pathBorder);
 
-  @media #{$mediumScreen} { left: $sidebarMediumWidth; }
+  @media #{$mediumScreen} { left: var(--sidebarMediumWidth); }
 
   ._sidebar-hidden & { left: 0; }
 
@@ -24,7 +24,7 @@
   display: inline-block;
   vertical-align: top;
   padding: 0 .375rem;
-  color: $textColor;
+  color: var(--textColor);
   text-decoration: none;
 
   &:first-child:before {
diff --git a/assets/stylesheets/components/_prism.scss b/assets/stylesheets/components/_prism.scss
index 405fd436..138fb04b 100644
--- a/assets/stylesheets/components/_prism.scss
+++ b/assets/stylesheets/components/_prism.scss
@@ -3,7 +3,7 @@
 .token.doctype,
 .token.cdata,
 .token.punctuation {
-  color: $textColorLight;
+  color: var(--textColorLight);
 }
 
 .namespace {
@@ -79,7 +79,7 @@
 
 .token.important,
 .token.bold {
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
 }
 
 .token.italic {
diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss
index c1134041..79f5ecd3 100644
--- a/assets/stylesheets/components/_settings.scss
+++ b/assets/stylesheets/components/_settings.scss
@@ -7,15 +7,15 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  z-index: $headerZ;
+  z-index: var(--headerZ);
 
   &._in { display: block; }
 
   > ._header { justify-content: space-between; }
 
   &._dirty > ._header {
-    background: $noteGreenBackground;
-    border-color: $noteGreenBorder;
+    background: var(--noteGreenBackground);
+    border-color: var(--noteGreenBorder);
   }
 }
 
@@ -37,7 +37,7 @@
   padding-right: .5rem;
   line-height: inherit;
   font-size: inherit;
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
   text-align: right;
   @extend %border-box;
 }
@@ -52,7 +52,7 @@
 
   > small {
     display: block;
-    color: $textColorLight;
+    color: var(--textColorLight);
     margin-left: 1.75rem;
   }
 
@@ -80,7 +80,7 @@
   line-height: 1.5rem;
   padding: 0 .75rem;
   font-size: .875rem;
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -119,12 +119,12 @@
   position: relative;
   vertical-align: top;
   padding: 0 .75rem;
-  line-height: $headerHeight;
-  color: $textColorLight;
+  line-height: var(--headerHeight);
+  color: var(--textColorLight);
 
   &.active {
-    color: $textColor;
-    font-weight: $boldFontWeight;
-    box-shadow: inset 0 -2px $linkColor;
+    color: var(--textColor);
+    font-weight: var(--boldFontWeight);
+    box-shadow: inset 0 -2px var(--linkColor);
   }
 }
diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss
index e38ed4d2..6ecfc308 100644
--- a/assets/stylesheets/components/_sidebar.scss
+++ b/assets/stylesheets/components/_sidebar.scss
@@ -4,14 +4,14 @@
 
 ._sidebar {
   position: absolute;
-  z-index: $sidebarZ;
+  z-index: var(--sidebarZ);
   top: 0;
   bottom: 0;
   left: 0;
   overflow-x: hidden;
   overflow-y: scroll;
-  padding-top: $headerHeight;
-  background: $sidebarBackground;
+  padding-top: var(--headerHeight);
+  background: var(--sidebarBackground);
   background-clip: content-box;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none; // IE 10 doesn't support pointer-events
@@ -22,13 +22,13 @@
 
   ._overlay-scrollbars & {
     padding-top: 0;
-    top: $headerHeight;
+    top: var(--headerHeight);
   }
 
   body:not(._native-scrollbars) & {
     &::-webkit-scrollbar { width: 10px; }
     &::-webkit-scrollbar-track {
-      background: $contentBackground;
+      background: var(--contentBackground);
       border: 0;
     }
     &::-webkit-scrollbar-thumb {
@@ -52,10 +52,10 @@
 
 ._resizer {
   position: absolute;
-  z-index: $sidebarZ + 1;
-  top: $headerHeight;
-  bottom: $headerHeight;
-  left: $sidebarWidth;
+  z-index: var(--headerZ);
+  top: var(--headerHeight);
+  bottom: var(--headerHeight);
+  left: var(--sidebarWidth);
   margin-left: -2px;
   width: 3px;
   cursor: col-resize;
@@ -72,11 +72,11 @@
   margin: 0;
   padding: 0;
   list-style: none;
-  width: $sidebarWidth;
-  box-shadow: inset -1px 0 $sidebarBorder;
+  width: var(--sidebarWidth);
+  box-shadow: inset -1px 0 var(--sidebarBorder);
   @extend %border-box;
 
-  @media #{$mediumScreen} { width: $sidebarMediumWidth; }
+  @media #{$mediumScreen} { width: var(--sidebarMediumWidth); }
 
   ._sidebar > & { min-height: 100%; }
 
@@ -89,7 +89,7 @@
   padding: 0 .75rem 0 2.125rem;
   line-height: 2rem;
   font-size: .75rem;
-  color: $textColorLight;
+  color: var(--textColorLight);
   text-transform: uppercase;
   cursor: default;
 }
@@ -110,8 +110,8 @@
   line-height: 1.5rem;
   font-size: .875rem;
   cursor: default;
-  background: $sidebarBackground;
-  box-shadow: inset -1px 0 $sidebarBorder;
+  background: var(--sidebarBackground);
+  box-shadow: inset -1px 0 var(--sidebarBorder);
   @extend %truncate-text;
 
   &, &:hover {
@@ -123,16 +123,16 @@
   &.focus:hover,
   &.active,
   &.active:hover {
-    color: $focusText;
-    background: $focusBackground;
-    box-shadow: inset -1px 0 $focusBorder;
+    color: var(--focusText);
+    background: var(--focusBackground);
+    box-shadow: inset -1px 0 var(--focusBorder);
   }
 
   &.active,
   &.active:hover {
-    color: $selectionText;
-    background: $selectionBackground;
-    box-shadow: inset -1px 0 $selectionBorder;
+    color: var(--selectionText);
+    background: var(--selectionBackground);
+    box-shadow: inset -1px 0 var(--selectionBorder);
   }
 
   &:before {
@@ -160,7 +160,7 @@
 }
 
 ._list-count {
-  color: $textColorLighter;
+  color: var(--textColorLighter);
   pointer-events: none;
 
   ._list-disabled:hover > & { display: none; }
@@ -168,7 +168,7 @@
 
 ._list-enable {
   display: none;
-  color: $linkColor;
+  color: var(--linkColor);
   cursor: pointer;
 
   &:hover { text-decoration: underline; }
@@ -188,7 +188,7 @@
 ._list-disabled {
   @extend %_list-dir;
 
-  &, &:hover { color: $textColorLight; }
+  &, &:hover { color: var(--textColorLight); }
   &:before { opacity: .7; }
 }
 
@@ -239,11 +239,11 @@
 //
 
 ._list-pagelink {
-  color: $linkColor;
+  color: var(--linkColor);
   cursor: pointer;
 
   &:hover {
-    color: $linkColorHover;
+    color: var(--linkColorHover);
     text-decoration: underline;
   }
 }
@@ -289,7 +289,7 @@
   padding: .5rem .75rem;
   line-height: 1.25rem;
   font-size: .8125rem;
-  color: $textColorLight;
+  color: var(--textColorLight);
 
   & + & { padding-top: 0; }
 }
@@ -303,9 +303,9 @@
 ._list-hover.clone {
   position: fixed;
   overflow: visible;
-  z-index: $hoverZ;
+  z-index: var(--hoverZ);
   left: 0;
-  min-width: $sidebarWidth;
+  min-width: var(--sidebarWidth);
   padding: .25rem .75rem;
   pointer-events: none;
   -webkit-font-smoothing: subpixel-antialiased;
@@ -313,7 +313,7 @@
           transform: translate3d(0, 0, 0);
   @extend %border-box;
 
-  @media #{$mediumScreen} { min-width: $sidebarMediumWidth; }
+  @media #{$mediumScreen} { min-width: var(--sidebarMediumWidth); }
 
   > ._list-text { display: inline; }
 
@@ -346,8 +346,8 @@
   padding: .5rem .75rem .25rem .75rem;
   line-height: 1.5rem;
   font-size: .75rem;
-  font-weight: $bolderFontWeight;
-  color: $textColorLight;
+  font-weight: var(--bolderFontWeight);
+  color: var(--textColorLight);
   text-transform: uppercase;
   background: linear-gradient(to bottom, $sidebarBackground, $sidebarBackground 75%, rgba($sidebarBackground, 0));
   cursor: default;
diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss
index 33c77a5e..3d666b78 100644
--- a/assets/stylesheets/global/_base.scss
+++ b/assets/stylesheets/global/_base.scss
@@ -1,7 +1,7 @@
 html {
   height: 100%;
   font-size: 100%;
-  background: $documentBackground;
+  background: var(--documentBackground);
 
   @media #{$mediumScreen} { font-size: 93.75%; }
 
@@ -15,12 +15,12 @@ body {
   overflow: auto;
   font-size: 1em;
   font-weight: normal;
-  font-family: $baseFont;
+  font-family: var(--baseFont);
   line-height: 1.7;
-  color: $textColor;
+  color: var(--textColor);
   word-wrap: break-word;
   overflow-wrap: break-word;
-  background: $contentBackground;
+  background: var(--contentBackground);
   touch-action: manipulation;
   -webkit-tap-highlight-color: rgba(black, 0);
   -webkit-touch-callout: none;
@@ -29,11 +29,11 @@ body {
 }
 
 a {
-  color: $linkColor;
-  text-decoration: $linkTextDecoration;
+  color: var(--linkColor);
+  text-decoration: var(--linkTextDecoration);
 
   &:hover {
-    color: $linkColorHover;
+    color: var(--linkColorHover);
     text-decoration: underline;
   }
 }
@@ -47,7 +47,7 @@ img {
 h1, h2, h3, h4, h5, h6 {
   margin: 1.5em 0 1em;
   line-height: 1.3;
-  font-weight: $bolderFontWeight;
+  font-weight: var(--bolderFontWeight);
 }
 
 h1 { font-size: 1.5em; }
@@ -59,7 +59,7 @@ h5, h6 { font-size: 1em; }
 p { margin: 0 0 1em; }
 p:last-child { margin-bottom: 0; }
 
-b, strong { font-weight: $boldFontWeight; }
+b, strong { font-weight: var(--boldFontWeight); }
 
 small { font-size: .9em; }
 
@@ -79,7 +79,7 @@ li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; }
 li > p { margin-bottom: .25em; }
 
 dl { margin: 1.5em 0; }
-dt { font-weight: $boldFontWeight; }
+dt { font-weight: var(--boldFontWeight); }
 dd {
   margin: .375em;
   padding-left: 1em;
@@ -91,15 +91,15 @@ dfn, var { font-style: normal; }
 
 abbr, acronym, dfn {
   cursor: help;
-  border-bottom: 1px dotted $textColor;
+  border-bottom: 1px dotted var(--textColor);
 }
 
 pre, code, samp, %pre, %code {
-  font-family: $monoFont;
+  font-family: var(--monoFont);
   font-weight: normal;
   font-style: normal;
   font-size: .9em;
-  color: $textColor;
+  color: var(--textColor);
   white-space: pre-wrap;
   direction: ltr;
   -moz-tab-size: 2;
@@ -121,14 +121,14 @@ a > code { color: inherit; }
 table {
   margin: 1.5em 0;
   background: none;
-  border: 1px solid $boxBorder;
+  border: 1px solid var(--boxBorder);
   border-collapse: separate;
   border-spacing: 0;
   border-radius: 3px;
 }
 
 caption {
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
   padding: 0 .7em .3em;
 }
 
@@ -142,15 +142,15 @@ th, td {
 }
 
 th {
-  font-weight: $boldFontWeight;
+  font-weight: var(--boldFontWeight);
   border: 0;
-  border-bottom: 1px solid $boxBorder;
+  border-bottom: 1px solid var(--boxBorder);
   border-radius: 0;
   @extend %heading-box;
 
   &:empty { background: none; }
 
-  + th, + td { border-left: 1px solid $boxBorder; }
+  + th, + td { border-left: 1px solid var(--boxBorder); }
 
   tr:first-child > &:first-child { border-top-left-radius: 3px; }
   tr:first-child > &:last-child { border-top-right-radius: 3px; }
@@ -161,10 +161,10 @@ th {
 }
 
 td {
-  background: $contentBackground;
-  border-bottom: 1px solid $boxBorderLight;
+  background: var(--contentBackground);
+  border-bottom: 1px solid var(--boxBorderLight);
 
-  + td { border-left: 1px solid $boxBorderLight; }
+  + td { border-left: 1px solid var(--boxBorderLight); }
   tr:last-child > & { border-bottom: 0; }
 
   > pre:only-child, > p:only-child, > ul:only-child, > ol:only-child {
@@ -190,7 +190,7 @@ input, button {
   margin: 0;
   font-family: inherit;
   font-size: 100%;
-  color: $textColor;
+  color: var(--textColor);
   line-height: normal;
   @extend %border-box;
 }
@@ -230,9 +230,9 @@ input[type="search"]::-webkit-search-decoration {
   border: 0 !important;
 }
 
-::-webkit-input-placeholder { color: $textColorLighter; }
-::-moz-placeholder          { color: $textColorLighter; opacity: 1; }
-:-ms-input-placeholder      { color: $textColorLighter; }
+::-webkit-input-placeholder { color: var(--textColorLighter); }
+::-moz-placeholder          { color: var(--textColorLighter); opacity: 1; }
+:-ms-input-placeholder      { color: var(--textColorLighter); }
 
 body:not(._native-scrollbars) {
   *::-webkit-scrollbar { -webkit-appearance: none; }
@@ -243,12 +243,12 @@ body:not(._native-scrollbars) {
   *::-webkit-scrollbar-corner { display: none; }
 
   *::-webkit-scrollbar-track {
-    background: $contentBackground;
-    border: 1px solid $contentBackground;
+    background: var(--contentBackground);
+    border: 1px solid var(--contentBackground);
 
     &:hover {
-      background: $sidebarBackground;
-      border-color: $sidebarBorder;
+      background: var(--sidebarBackground);
+      border-color: var(--sidebarBorder);
     }
 
     &:vertical { border-width: 0 0 0 1px; }
@@ -266,14 +266,14 @@ body:not(._native-scrollbars) {
 
   *::-webkit-scrollbar-thumb {
     min-height: 2rem;
-    background: $scrollbarColor;
+    background: var(--scrollbarColor);
     background-clip: padding-box;
     border: 5px solid rgba(black, 0);
     border-radius: 10px;
 
     &:hover,
     &:active {
-      background-color: $scrollbarColorHover;
+      background-color: var(--scrollbarColorHover);
       border-width: 4px;
     }
   }
diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss
index f96f617b..5ecd3f2c 100644
--- a/assets/stylesheets/global/_classes.scss
+++ b/assets/stylesheets/global/_classes.scss
@@ -36,15 +36,15 @@
 //
 
 %box {
-  background: $boxBackground;
-  border: 1px solid $boxBorder;
+  background: var(--boxBackground);
+  border: 1px solid var(--boxBorder);
   border-radius: 3px;
 }
 
 %heading-box {
-  color: $boxHeaderColor;
-  background: $boxHeaderBackground;
-  border: 1px solid $boxBorder;
+  color: var(--boxHeaderColor);
+  background: var(--boxHeaderBackground);
+  border: 1px solid var(--boxBorder);
   border-radius: 3px;
 }
 
@@ -82,15 +82,15 @@
 %note {
   margin: 1.5rem 0;
   padding: .5rem .875rem;
-  background: $noteBackground;
-  border: 1px solid $noteBorder;
+  background: var(--noteBackground);
+  border: 1px solid var(--noteBorder);
   border-radius: 3px;
 }
 
 %label {
   margin: 0 1px;
   padding: 1px 4px 2px;
-  background: $labelBackground;
+  background: var(--labelBackground);
   border-radius: 3px;
 }
 
@@ -102,35 +102,35 @@
   padding-right: .5em;
   overflow: hidden;
   font-size: inherit;
-  color: $boxHeaderColor;
-  border: 1px solid $boxBorder;
+  color: var(--boxHeaderColor);
+  border: 1px solid var(--boxBorder);
   border-radius: 2px;
   @extend %label;
 }
 
 %label-yellow {
-  background: $noteBackground;
-  border-color: $noteBorder;
+  background: var(--noteBackground);
+  border-color: var(--noteBorder);
 }
 
 %note-green, %label-green {
-  background: $noteGreenBackground;
-  border-color: $noteGreenBorder;
+  background: var(--noteGreenBackground);
+  border-color: var(--noteGreenBorder);
 }
 
 %note-blue, %label-blue {
-  background: $noteBlueBackground;
-  border-color: $noteBlueBorder;
+  background: var(--noteBlueBackground);
+  border-color: var(--noteBlueBorder);
 }
 
 %note-orange, %label-orange {
-  background: $noteOrangeBackground;
-  border-color: $noteOrangeBorder;
+  background: var(--noteOrangeBackground);
+  border-color: var(--noteOrangeBorder);
 }
 
 %note-red, %label-red {
-  background: $noteRedBackground;
-  border-color: $noteRedBorder;
+  background: var(--noteRedBackground);
+  border-color: var(--noteRedBorder);
 }
 
 //
diff --git a/assets/stylesheets/global/_print.scss b/assets/stylesheets/global/_print.scss
index 5044631e..08c14fd1 100644
--- a/assets/stylesheets/global/_print.scss
+++ b/assets/stylesheets/global/_print.scss
@@ -25,14 +25,14 @@
 
   ._attribution-p {
     background: none;
-    border: 2px solid $boxBorder;
+    border: 2px solid var(--boxBorder);
   }
 
   ._attribution:last-child:after {
     content: 'Exported from DevDocs \2014  https://devdocs.io';
     display: block;
     margin-top: 1rem;
-    font-weight: $bolderFontWeight;
+    font-weight: var(--bolderFontWeight);
   }
 
   ._attribution {
diff --git a/assets/stylesheets/global/_variables-dark.scss b/assets/stylesheets/global/_variables-dark.scss
index 17129d9f..cedccb0c 100644
--- a/assets/stylesheets/global/_variables-dark.scss
+++ b/assets/stylesheets/global/_variables-dark.scss
@@ -1,92 +1,98 @@
-$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
-$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-$boldFontWeight: 500;
-$bolderFontWeight: 600;
-
 $style: 'dark';
-
-$maxWidth: 80rem;
-$headerHeight: 3rem;
-$sidebarWidth: 20rem;
-$sidebarMediumWidth: 16rem;
-
-$documentBackground: #222;
+$mediumScreen: '(max-width: 800px)';
+// TODO: convert uses of these to CSS variables
+$selectionText: #fff;
+$sidebarBackground: #24282a;
+$headerBackground: #1c1c1c;
 $contentBackground: #33373a;
+$inputFocusBorder: false;
+html.dark {
+  --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
+  --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --boldFontWeight: 500;
+  --bolderFontWeight: 600;
 
-$textColor: #cbd0d0;
-$textColorLight: #9da5ad;
-$textColorLighter: #77787a;
-$textColorRed: #f44336;
+  --maxWidth: 80rem;
+  --headerHeight: 3rem;
+  --sidebarWidth: 20rem;
+  --sidebarMediumWidth: 16rem;
 
-$inputFocusBorder: false;
+  --documentBackground: #222;
+  --contentBackground: $contentBackground;
 
-$focusBackground: #3f4042;
-$focusBorder: #000;
-$focusText: #f7f2f2;
+  --textColor: #cbd0d0;
+  --textColorLight: #9da5ad;
+  --textColorLighter: #77787a;
+  --textColorRed: #f44336;
 
-$loadingText: #5d6164;
-$splashText: $loadingText;
+  --inputFocusBorder: $inputFocusBorder;
 
-$selectionBackground: #007acc;
-$selectionBorder: #000;
-$selectionText: #fff;
+  --focusBackground: #3f4042;
+  --focusBorder: #000;
+  --focusText: #f7f2f2;
 
-$highlightBackground: #64675f;
+  --loadingText: #5d6164;
+  --splashText:   --loadingText;
 
-$linkColor: $textColor;
-$linkColorHover: white;
-$linkTextDecoration: underline;
+  --selectionBackground: #007acc;
+  --selectionBorder: #000;
+  --selectionText: $selectionText;
 
-$headerBackground: #1c1c1c;
-$headerBorder: #000;
+  --highlightBackground: #64675f;
 
-$sidebarBackground: #24282a;
-$sidebarBorder: #000;
+  --linkColor: var(--textColor);
+  --linkColorHover: white;
+  --linkTextDecoration: underline;
 
-$scrollbarColor: #6c6c6f;
-$scrollbarColorHover: #949697;
+  --headerBackground: $headerBackground;
+  --headerBorder: #000;
 
-$pathBackground: $headerBackground;
-$pathBorder: $headerBorder;
+  --sidebarBackground: $sidebarBackground;
+  --sidebarBorder: #000;
 
-$noticeBackground: $sidebarBackground;
-$noticeBorder: $sidebarBorder;
+  --scrollbarColor: #6c6c6f;
+  --scrollbarColorHover: #949697;
 
-$boxBackground: $sidebarBackground;
-$boxBorder: $headerBorder;
-$boxBorderLight: $headerBorder;
-$boxHeaderColor: #dbe4e4;
-$boxHeaderBackground: $sidebarBackground;
+  --pathBackground: var(--headerBackground);
+  --pathBorder: var(--headerBorder);
 
-$noteBackground: #45474b;
-$noteBorder: #000;
+  --noticeBackground: var(--sidebarBackground);
+  --noticeBorder: var(--sidebarBorder);
 
-$noteGreenBackground: #284a2a;
-$noteGreenBorder: #000;
+  --boxBackground: var(--sidebarBackground);
+  --boxBorder: var(--headerBorder);
+  --boxBorderLight: var(--headerBorder);
+  --boxHeaderColor: #dbe4e4;
+  --boxHeaderBackground: var(--sidebarBackground);
 
-$noteBlueBackground: #2a4151;
-$noteBlueBorder: #000;
+  --noteBackground: #45474b;
+  --noteBorder: #000;
 
-$noteOrangeBackground: #563322;
-$noteOrangeBorder: #000;
+  --noteGreenBackground: #284a2a;
+  --noteGreenBorder: #000;
 
-$noteRedBackground: #603033;
-$noteRedBorder: #000;
+  --noteBlueBackground: #2a4151;
+  --noteBlueBorder: #000;
 
-$labelBackground: $boxBackground;
+  --noteOrangeBackground: #563322;
+  --noteOrangeBorder: #000;
 
-$notifBackground: rgba(#555, .95);
-$notifBorder: 1px solid #000;
-$notifColor: #fff;
-$notifColorLight: #ccc;
+  --noteRedBackground: #603033;
+  --noteRedBorder: #000;
 
-$tipBackground: $notifBackground;
-$tipBorder: $notifBorder;
+  --labelBackground: var(--boxBackground);
 
-$mediumScreen: '(max-width: 800px)';
+  --notifBackground: rgba(#555, .95);
+  --notifBorder: 1px solid #000;
+  --notifColor: #fff;
+  --notifColorLight: #ccc;
+
+  --tipBackground: var(--notifBackground);
+  --tipBorder: var(--notifBorder);
 
-$contentZ: 1;
-$sidebarZ: 2;
-$headerZ: 3;
-$noticeZ: 4;
-$hoverZ: 5;
+  --contentZ: 1;
+  --sidebarZ: 2;
+  --headerZ: 3;
+  --noticeZ: 4;
+  --hoverZ: 5;
+}
diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss
index bbdedf9f..5db30df2 100644
--- a/assets/stylesheets/global/_variables.scss
+++ b/assets/stylesheets/global/_variables.scss
@@ -1,92 +1,99 @@
-$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
-$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-$boldFontWeight: 500;
-$bolderFontWeight: 600;
-
 $style: 'light';
+$mediumScreen: '(max-width: 800px)';
+// TODO: convert uses of these to CSS variables
+$selectionText: #fff;
+$sidebarBackground: #f9f9f9;
+$headerBackground: #eee;
+$contentBackground: #fff;
+$inputFocusBorder: #35b5f4;
 
-$maxWidth: 80rem;
-$headerHeight: 3rem;
-$sidebarWidth: 20rem;
-$sidebarMediumWidth: 16rem;
+html {
+  --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
+  --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --boldFontWeight: 500;
+  --bolderFontWeight: 600;
 
-$documentBackground: #f3f3f3;
-$contentBackground: #fff;
+  --maxWidth: 80rem;
+  --headerHeight: 3rem;
+  --sidebarWidth: 20rem;
+  --sidebarMediumWidth: 16rem;
 
-$textColor: #333;
-$textColorLight: #666;
-$textColorLighter: #888;
-$textColorRed: #f44336;
+  --documentBackground: #f3f3f3;
+  --contentBackground: $contentBackground;
 
-$inputFocusBorder: #35b5f4;
+  --textColor: #333;
+  --textColorLight: #666;
+  --textColorLighter: #888;
+  --textColorRed: #f44336;
 
-$focusBackground: #e5e5e5;
-$focusBorder: #d4d4d4;
-$focusText: #000;
+  --inputFocusBorder: $inputFocusBorder;
 
-$loadingText: #ccc;
-$splashText: #ccc;
+  --focusBackground: #e5e5e5;
+  --focusBorder: #d4d4d4;
+  --focusText: #000;
 
-$selectionBackground: #398df0;
-$selectionBorder: #196fc2;
-$selectionText: #fff;
+  --loadingText: #ccc;
+  --splashText: #ccc;
 
-$highlightBackground: #fffdcd;
+  --selectionBackground: #398df0;
+  --selectionBorder: #196fc2;
+  --selectionText: $selectionText;
 
-$linkColor: #3377c0;
-$linkColorHover: #2f6cb6;
-$linkTextDecoration: none;
+  --highlightBackground: #fffdcd;
 
-$headerBackground: #eee;
-$headerBorder: #d7d7d7;
+  --linkColor: #3377c0;
+  --linkColorHover: #2f6cb6;
+  --linkTextDecoration: none;
 
-$sidebarBackground: #f9f9f9;
-$sidebarBorder: #e1e1e1;
+  --headerBackground: $headerBackground;
+  --headerBorder: #d7d7d7;
 
-$scrollbarColor: #ccc;
-$scrollbarColorHover: #999;
+  --sidebarBackground: $sidebarBackground;
+  --sidebarBorder: #e1e1e1;
 
-$pathBackground: $sidebarBackground;
-$pathBorder: $sidebarBorder;
+  --scrollbarColor: #ccc;
+  --scrollbarColorHover: #999;
 
-$noticeBackground: #faf9e2;
-$noticeBorder: #e2e2c1;
+  --pathBackground: var(--sidebarBackground);
+  --pathBorder: var(--sidebarBorder);
 
-$boxBackground: #fafafa;
-$boxBorder: #d8d8d8;
-$boxBorderLight: #e5e5e5;
-$boxHeaderColor: $textColor;
-$boxHeaderBackground: #f5f5f5;
+  --noticeBackground: #faf9e2;
+  --noticeBorder: #e2e2c1;
 
-$noteBackground: #f8f8dd;
-$noteBorder: #d3d952;
+  --boxBackground: #fafafa;
+  --boxBorder: #d8d8d8;
+  --boxBorderLight: #e5e5e5;
+  --boxHeaderColor: var(--textColor);
+  --boxHeaderBackground: #f5f5f5;
 
-$noteGreenBackground: #e7f8e1;
-$noteGreenBorder: #89da70;
+  --noteBackground: #f8f8dd;
+  --noteBorder: #d3d952;
 
-$noteBlueBackground: #d4f3fd;
-$noteBlueBorder: #94bbeb;
+  --noteGreenBackground: #e7f8e1;
+  --noteGreenBorder: #89da70;
 
-$noteOrangeBackground: #fbe6d1;
-$noteOrangeBorder: #ec8b01;
+  --noteBlueBackground: #d4f3fd;
+  --noteBlueBorder: #94bbeb;
 
-$noteRedBackground: #fed5d3;
-$noteRedBorder: #dc7874;
+  --noteOrangeBackground: #fbe6d1;
+  --noteOrangeBorder: #ec8b01;
 
-$labelBackground: #f4f4f4;
+  --noteRedBackground: #fed5d3;
+  --noteRedBorder: #dc7874;
 
-$notifBackground: rgba(#333, .85);
-$notifBorder: none;
-$notifColor: #fff;
-$notifColorLight: #ccc;
+  --labelBackground: #f4f4f4;
 
-$tipBackground: rgba(#fffdcd, .95);
-$tipBorder: 1px solid #e7dca9;
+  --notifBackground: rgba(#333, .85);
+  --notifBorder: none;
+  --notifColor: #fff;
+  --notifColorLight: #ccc;
 
-$mediumScreen: '(max-width: 800px)';
+  --tipBackground: rgba(#fffdcd, .95);
+  --tipBorder: 1px solid #e7dca9;
 
-$contentZ: 1;
-$sidebarZ: 2;
-$headerZ: 3;
-$noticeZ: 4;
-$hoverZ: 5;
+  --contentZ: 1;
+  --sidebarZ: 2;
+  --headerZ: 3;
+  --noticeZ: 4;
+  --hoverZ: 5;
+}
diff --git a/assets/stylesheets/pages/_angularjs.scss b/assets/stylesheets/pages/_angularjs.scss
index 5b6df0bc..13f85796 100644
--- a/assets/stylesheets/pages/_angularjs.scss
+++ b/assets/stylesheets/pages/_angularjs.scss
@@ -8,7 +8,7 @@
   .nav-index-section {
     margin: 1.5em 0 1em -2em;
     list-style: none;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
     text-transform: capitalize;
   }
 
diff --git a/assets/stylesheets/pages/_async.scss b/assets/stylesheets/pages/_async.scss
index 09d018f5..c8961dfd 100644
--- a/assets/stylesheets/pages/_async.scss
+++ b/assets/stylesheets/pages/_async.scss
@@ -3,13 +3,13 @@
 
   h3 > .type-signature {
     float: right;
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
 
   h3 > .signature-attributes {
     font-size: .75rem;
     font-weight: normal;
     font-style: italic;
-    color: $textColorLighter;
+    color: var(--textColorLighter);
   }
 }
diff --git a/assets/stylesheets/pages/_bootstrap.scss b/assets/stylesheets/pages/_bootstrap.scss
index 0deb79b7..fbd885ea 100644
--- a/assets/stylesheets/pages/_bootstrap.scss
+++ b/assets/stylesheets/pages/_bootstrap.scss
@@ -4,7 +4,7 @@
   h4 > code, h5 > code, strong > code { @extend %label; }
 
   h2 > small {
-    color: $textColorLight;
+    color: var(--textColorLight);
     float: right;
   }
 
diff --git a/assets/stylesheets/pages/_c.scss b/assets/stylesheets/pages/_c.scss
index b9c4c25f..9aeafdcb 100644
--- a/assets/stylesheets/pages/_c.scss
+++ b/assets/stylesheets/pages/_c.scss
@@ -23,7 +23,7 @@
 
   .t-spar { // language/switch, language/for, etc.
     font-style: italic;
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
   .t-sdsc-nopad dl, .t-sdsc-nopad dd { margin: 0; }
 
@@ -57,7 +57,7 @@
     margin: 1rem 0;
     padding: .375rem;
     font-size: .75rem;
-    border: 1px solid $boxBorder;
+    border: 1px solid var(--boxBorder);
     border-radius: 2px;
   }
 
diff --git a/assets/stylesheets/pages/_clojure.scss b/assets/stylesheets/pages/_clojure.scss
index 9f5e5db4..c1b2647c 100644
--- a/assets/stylesheets/pages/_clojure.scss
+++ b/assets/stylesheets/pages/_clojure.scss
@@ -5,6 +5,6 @@
   .type {
     float: right;
     font-size: .9em;
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
 }
diff --git a/assets/stylesheets/pages/_d.scss b/assets/stylesheets/pages/_d.scss
index a32e84b0..7e672145 100644
--- a/assets/stylesheets/pages/_d.scss
+++ b/assets/stylesheets/pages/_d.scss
@@ -2,10 +2,10 @@
   h2 { @extend %block-heading; }
   h3, .d_decl { @extend %block-label, %label-blue; }
   .d_decl { @extend %code; }
-  .d_decl > small { color: $textColorLight; }
-  .d_decl > strong { font-weight: $bolderFontWeight; }
+  .d_decl > small { color: var(--textColorLight); }
+  .d_decl > strong { font-weight: var(--bolderFontWeight); }
 
   p > code, li > code, td > code, dd > code { @extend %label; }
 
-  span.red { color: $textColorRed; }
+  span.red { color: var(--textColorRed); }
 }
diff --git a/assets/stylesheets/pages/_dojo.scss b/assets/stylesheets/pages/_dojo.scss
index bb24b223..d22b1f81 100644
--- a/assets/stylesheets/pages/_dojo.scss
+++ b/assets/stylesheets/pages/_dojo.scss
@@ -1,5 +1,5 @@
 ._dojo {
   @extend %simple;
 
-  .jsdoc-inheritance { color: $textColorLight; }
+  .jsdoc-inheritance { color: var(--textColorLight); }
 }
diff --git a/assets/stylesheets/pages/_ember.scss b/assets/stylesheets/pages/_ember.scss
index 636b56b6..9b3f4689 100644
--- a/assets/stylesheets/pages/_ember.scss
+++ b/assets/stylesheets/pages/_ember.scss
@@ -5,7 +5,7 @@
 
   h3 > .access {
     float: right;
-    color: $textColorLight;
+    color: var(--textColorLight);
     font-weight: normal;
   }
 
@@ -15,6 +15,6 @@
   }
 
   p.github-link {
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
 }
diff --git a/assets/stylesheets/pages/_erlang.scss b/assets/stylesheets/pages/_erlang.scss
index ba221ec7..1b76cf6d 100644
--- a/assets/stylesheets/pages/_erlang.scss
+++ b/assets/stylesheets/pages/_erlang.scss
@@ -5,5 +5,5 @@
   code.code { @extend %label; }
   .note { @extend %note; }
   .warning { @extend %note, %note-red; }
-  .note .label, .warning .label { font-weight: $boldFontWeight; }
+  .note .label, .warning .label { font-weight: var(--boldFontWeight); }
 }
diff --git a/assets/stylesheets/pages/_jquery.scss b/assets/stylesheets/pages/_jquery.scss
index 4858f4ef..d1a62a1c 100644
--- a/assets/stylesheets/pages/_jquery.scss
+++ b/assets/stylesheets/pages/_jquery.scss
@@ -32,7 +32,7 @@
 
   .toc-list {
     margin-top: 0;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
 
     > li + li { margin-top: 1em; }
     > li > ul { font-weight: normal; }
@@ -48,7 +48,7 @@
   .returns,
   .option-type {
     float: right;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
     margin-left: 1em;
   }
 
diff --git a/assets/stylesheets/pages/_love.scss b/assets/stylesheets/pages/_love.scss
index a1908523..b037527f 100644
--- a/assets/stylesheets/pages/_love.scss
+++ b/assets/stylesheets/pages/_love.scss
@@ -12,6 +12,6 @@
   .smwtable { width: 100%; }
   .smwtable td:nth-last-child(2), .smwtable td:last-child { width: 2.5em; }
 
-  .cell-green { background: $noteGreenBackground; }
-  .cell-red { background: $noteRedBackground; }
+  .cell-green { background: var(--noteGreenBackground); }
+  .cell-red { background: var(--noteRedBackground); }
 }
diff --git a/assets/stylesheets/pages/_mdn.scss b/assets/stylesheets/pages/_mdn.scss
index b1f89f4f..d2b9b643 100644
--- a/assets/stylesheets/pages/_mdn.scss
+++ b/assets/stylesheets/pages/_mdn.scss
@@ -7,7 +7,7 @@
     > span {
       display: block;
       font-size: 1rem;
-      font-weight: $boldFontWeight;
+      font-weight: var(--boldFontWeight);
     }
 
     ul, ol {
@@ -42,7 +42,7 @@
   > .note {
     em {
       font-style: normal;
-      font-weight: $boldFontWeight;
+      font-weight: var(--boldFontWeight);
     }
 
     > ul { margin: 1em 0; }
@@ -93,7 +93,7 @@
   dt > strong > code, // HTML element attribute
   dl > dt > code {    // CSS property value, Javascript function argument
     font-family: inherit;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
     font-size: inherit;
   }
 
diff --git a/assets/stylesheets/pages/_meteor.scss b/assets/stylesheets/pages/_meteor.scss
index adb0121e..5497239f 100644
--- a/assets/stylesheets/pages/_meteor.scss
+++ b/assets/stylesheets/pages/_meteor.scss
@@ -9,10 +9,10 @@
   dt > code { @extend %label; }
 
   .api-heading { overflow: hidden; }
-  .api-heading > code { font-weight: $boldFontWeight; }
+  .api-heading > code { font-weight: var(--boldFontWeight); }
   .locus, .src-code { float: right; }
   .locus, .type, .src-code { margin-left: .5em; }
   h2 .subtext-api { margin-top: .25rem; }
   .locus, .subtext-api, .subtext-api > code { font-size: .75rem; }
-  .locus, .type { color: $textColorLight; }
+  .locus, .type { color: var(--textColorLight); }
 }
diff --git a/assets/stylesheets/pages/_npm.scss b/assets/stylesheets/pages/_npm.scss
index 9bbcc74c..bdb4482d 100644
--- a/assets/stylesheets/pages/_npm.scss
+++ b/assets/stylesheets/pages/_npm.scss
@@ -8,7 +8,7 @@
 
   .faint.heading {
     font-size: .9em;
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
 
   .youtube-video iframe { width: 420px; height: 315px; }
diff --git a/assets/stylesheets/pages/_phalcon.scss b/assets/stylesheets/pages/_phalcon.scss
index 646cf07c..60a32758 100644
--- a/assets/stylesheets/pages/_phalcon.scss
+++ b/assets/stylesheets/pages/_phalcon.scss
@@ -3,6 +3,6 @@
 
   h3 > small {
     float: right;
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
 }
diff --git a/assets/stylesheets/pages/_php.scss b/assets/stylesheets/pages/_php.scss
index 319ac647..c6fd4d6b 100644
--- a/assets/stylesheets/pages/_php.scss
+++ b/assets/stylesheets/pages/_php.scss
@@ -13,7 +13,7 @@
 
   .verinfo {
     float: right;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
   }
 
   .classsynopsis,
@@ -21,7 +21,7 @@
   .description > .methodsynopsis,
   .description > .fieldsynopsis { @extend %note, %note-blue; }
 
-  .classsynopsisinfo_comment { color: $textColorLight; }
+  .classsynopsisinfo_comment { color: var(--textColorLight); }
 
   .classsynopsisinfo_comment,
   .classsynopsis > .constructorsynopsis,
diff --git a/assets/stylesheets/pages/_postgres.scss b/assets/stylesheets/pages/_postgres.scss
index 69e202c1..7c42a001 100644
--- a/assets/stylesheets/pages/_postgres.scss
+++ b/assets/stylesheets/pages/_postgres.scss
@@ -16,7 +16,7 @@
   }
 
   p > code { @extend %label; }
-  p.c2 { font-weight: $boldFontWeight; }
+  p.c2 { font-weight: var(--boldFontWeight); }
 
   .navfooter > table { width: 100%; }
   td[align=center] { text-align: center; }
diff --git a/assets/stylesheets/pages/_rdoc.scss b/assets/stylesheets/pages/_rdoc.scss
index f1c8b2cb..6cf7050f 100644
--- a/assets/stylesheets/pages/_rdoc.scss
+++ b/assets/stylesheets/pages/_rdoc.scss
@@ -6,7 +6,7 @@
   .method-description > h2, h3, h4, h5, h6 { font-size: 1em; }
 
   .method-heading {
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
     @extend %block-label, %label-blue;
 
     + .method-heading { margin-top: -.5em; }
@@ -22,7 +22,7 @@
   a.method-click-advice {
     float: right;
     font-size: .75rem;
-    color: $linkColor;
+    color: var(--linkColor);
     cursor: pointer;
     @extend %user-select-none;
 
@@ -43,7 +43,7 @@
     left: -1em;
     right: 0;
     background: rgba($contentBackground, .95);
-    box-shadow: 0 1em 1em 1em $contentBackground;
+    box-shadow: 0 1em 1em 1em var(--contentBackground);
 
     > pre { margin: 0; }
   }
diff --git a/assets/stylesheets/pages/_react_native.scss b/assets/stylesheets/pages/_react_native.scss
index ee4d1c67..1345a35f 100644
--- a/assets/stylesheets/pages/_react_native.scss
+++ b/assets/stylesheets/pages/_react_native.scss
@@ -2,7 +2,7 @@
   @extend %simple;
 
   .deprecated { @extend %note, %note-orange; }
-  .deprecatedTitle { font-weight: $boldFontWeight; }
+  .deprecatedTitle { font-weight: var(--boldFontWeight); }
 
   span.platform { float: right; }
   span.propType, span.platform { font-weight: normal; }
diff --git a/assets/stylesheets/pages/_redis.scss b/assets/stylesheets/pages/_redis.scss
index 3ed1837c..e4541f8b 100644
--- a/assets/stylesheets/pages/_redis.scss
+++ b/assets/stylesheets/pages/_redis.scss
@@ -14,7 +14,7 @@
 
   .args {
     font-size: .75rem;
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
 
   // Others
@@ -35,7 +35,7 @@
     > .prompt {
       float: left;
       margin-right: .5em;
-      color: $textColorLight;
+      color: var(--textColorLight);
     }
 
     > code {
diff --git a/assets/stylesheets/pages/_rfc.scss b/assets/stylesheets/pages/_rfc.scss
index b522b308..eab55beb 100644
--- a/assets/stylesheets/pages/_rfc.scss
+++ b/assets/stylesheets/pages/_rfc.scss
@@ -10,6 +10,6 @@
 
   > h1, > h2, > h3, > h4, > h5 {
     margin: 0;
-    font-family: $baseFont;
+    font-family: var(--baseFont);
   }
 }
diff --git a/assets/stylesheets/pages/_sphinx.scss b/assets/stylesheets/pages/_sphinx.scss
index 86744e33..ffd71415 100644
--- a/assets/stylesheets/pages/_sphinx.scss
+++ b/assets/stylesheets/pages/_sphinx.scss
@@ -14,7 +14,7 @@
 
   .versionmodified, span.title, .topic-title {
     display: block;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
   }
 
   p > code, li > code, dd > code, .docutils > dt > code { @extend %label; }
@@ -26,7 +26,7 @@
   .admonition-title {
     float: left;
     margin: 0 .5em 0 0;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
 
     &:after { content: ':'; }
   }
diff --git a/assets/stylesheets/pages/_sphinx_simple.scss b/assets/stylesheets/pages/_sphinx_simple.scss
index 7cb7e0dc..cbee1ea1 100644
--- a/assets/stylesheets/pages/_sphinx_simple.scss
+++ b/assets/stylesheets/pages/_sphinx_simple.scss
@@ -6,7 +6,7 @@
   .admonition.tip { @extend %note-green; }
   .admonition-title {
     margin: 0 0 .25rem;
-    font-weight: $boldFontWeight;
+    font-weight: var(--boldFontWeight);
   }
 
   code { @extend %label; }
diff --git a/assets/stylesheets/pages/_support_tables.scss b/assets/stylesheets/pages/_support_tables.scss
index 0ef0b3d3..1fc45b75 100644
--- a/assets/stylesheets/pages/_support_tables.scss
+++ b/assets/stylesheets/pages/_support_tables.scss
@@ -24,7 +24,7 @@
     }
 
     tr.current {
-      font-weight: $boldFontWeight;
+      font-weight: var(--boldFontWeight);
       font-size: 1rem;
     }
 
diff --git a/assets/stylesheets/pages/_yard.scss b/assets/stylesheets/pages/_yard.scss
index 227dd234..bb2fbc47 100644
--- a/assets/stylesheets/pages/_yard.scss
+++ b/assets/stylesheets/pages/_yard.scss
@@ -1,5 +1,5 @@
 ._yard {
   @extend %simple;
 
-  .tag_title { font-weight: $boldFontWeight; }
+  .tag_title { font-weight: var(--boldFontWeight); }
 }
diff --git a/assets/stylesheets/pages/_yii.scss b/assets/stylesheets/pages/_yii.scss
index d8e4bed9..6cb99978 100644
--- a/assets/stylesheets/pages/_yii.scss
+++ b/assets/stylesheets/pages/_yii.scss
@@ -3,6 +3,6 @@
 
   .detail-header-tag, .detailHeaderTag {
     float: right;
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
 }