diff --git a/.gitignore b/.gitignore
index bbf749a452..91e8aa704a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,7 @@ docs/**/*
 *.tar.bz2
 *.tar.gz
 *.zip
+
+# SCSS manually compiled from ERB.
+assets/stylesheets/global/_icons.scss
+assets/stylesheets/components/_environment.scss
diff --git a/Gemfile b/Gemfile
index 9893bb5774..85c71f879e 100644
--- a/Gemfile
+++ b/Gemfile
@@ -15,16 +15,15 @@ group :app do
   gem 'browser'
   gem 'chunky_png'
   gem 'erubi'
+  gem 'dartsass-sprockets'
   gem 'image_optim_pack', platforms: :ruby
   gem 'image_optim'
   gem 'rack-ssl-enforcer'
   gem 'rack'
   gem 'rss'
-  gem 'sass'
   gem 'sinatra-contrib'
   gem 'sinatra'
   gem 'sprockets-helpers'
-  gem 'sprockets-sass'
   gem 'sprockets'
   gem 'thin'
 end
diff --git a/Gemfile.lock b/Gemfile.lock
index 0dc3ed1f8e..bae3b958e0 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,6 +1,25 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    actionpack (7.2.3)
+      actionview (= 7.2.3)
+      activesupport (= 7.2.3)
+      cgi
+      nokogiri (>= 1.8.5)
+      racc
+      rack (>= 2.2.4, < 3.3)
+      rack-session (>= 1.0.1)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+      useragent (~> 0.16)
+    actionview (7.2.3)
+      activesupport (= 7.2.3)
+      builder (~> 3.1)
+      cgi
+      erubi (~> 1.11)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
     activesupport (7.2.3)
       base64
       benchmark (>= 0.3)
@@ -21,13 +40,24 @@ GEM
       rouge (>= 1.0.0)
     bigdecimal (3.1.9)
     browser (5.3.1)
+    builder (3.3.0)
     byebug (12.0.0)
+    cgi (0.5.1)
     chunky_png (1.4.0)
     coderay (1.1.3)
     concurrent-ruby (1.3.5)
     connection_pool (2.4.1)
+    crass (1.0.6)
     daemons (1.4.1)
+    dartsass-sprockets (3.2.1)
+      railties (>= 4.0.0)
+      sassc-embedded (~> 1.80.1)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
+    date (3.5.1)
     drb (2.2.3)
+    erb (6.0.1)
     erubi (1.13.1)
     ethon (0.17.0)
       ffi (>= 1.15.0)
@@ -36,6 +66,9 @@ GEM
     exifr (1.4.0)
     ffi (1.17.2)
     fspath (3.1.2)
+    google-protobuf (4.33.4)
+      bigdecimal
+      rake (>= 13)
     highline (3.1.2)
       reline
     html-pipeline (2.14.3)
@@ -55,7 +88,14 @@ GEM
     image_size (3.3.0)
     in_threads (1.6.0)
     io-console (0.8.0)
+    irb (1.16.0)
+      pp (>= 0.6.0)
+      rdoc (>= 4.0.0)
+      reline (>= 0.4.2)
     logger (1.6.6)
+    loofah (2.25.0)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.12.0)
     method_source (1.1.0)
     mini_portile2 (2.8.9)
     minitest (5.27.0)
@@ -67,6 +107,9 @@ GEM
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     options (2.3.2)
+    pp (0.6.3)
+      prettyprint
+    prettyprint (0.2.0)
     progress (3.6.0)
     progress_bar (1.3.4)
       highline (>= 1.6)
@@ -77,18 +120,44 @@ GEM
     pry-byebug (3.11.0)
       byebug (~> 12.0)
       pry (>= 0.13, < 0.16)
+    psych (5.3.1)
+      date
+      stringio
     racc (1.8.1)
     rack (2.2.21)
     rack-protection (3.2.0)
       base64 (>= 0.1.0)
       rack (~> 2.2, >= 2.2.4)
+    rack-session (1.0.2)
+      rack (< 3)
     rack-ssl-enforcer (0.2.9)
     rack-test (2.2.0)
       rack (>= 1.3)
+    rackup (1.0.1)
+      rack (< 3)
+      webrick
+    rails-dom-testing (2.3.0)
+      activesupport (>= 5.0.0)
+      minitest
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.6.2)
+      loofah (~> 2.21)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    railties (7.2.3)
+      actionpack (= 7.2.3)
+      activesupport (= 7.2.3)
+      cgi
+      irb (~> 1.13)
+      rackup (>= 1.0.0)
+      rake (>= 12.2)
+      thor (~> 1.0, >= 1.2.2)
+      tsort (>= 0.2)
+      zeitwerk (~> 2.6)
     rake (13.3.1)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
+    rdoc (7.1.0)
+      erb
+      psych (>= 4.0.0)
+      tsort
     redcarpet (3.6.1)
     reline (0.6.0)
       io-console (~> 0.5)
@@ -98,11 +167,11 @@ GEM
     rss (0.3.1)
       rexml
     ruby2_keywords (0.0.5)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
+    sass-embedded (1.97.3)
+      google-protobuf (~> 4.31)
+      rake (>= 13)
+    sassc-embedded (1.80.8)
+      sass-embedded (~> 1.80)
     securerandom (0.3.2)
     sinatra (3.2.0)
       mustermann (~> 3.0)
@@ -115,14 +184,17 @@ GEM
       rack-protection (= 3.2.0)
       sinatra (= 3.2.0)
       tilt (~> 2.0)
-    sprockets (3.7.5)
-      base64
+    sprockets (4.2.2)
       concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
+      logger
+      rack (>= 2.2.4, < 4)
     sprockets-helpers (1.4.0)
       sprockets (>= 2.2)
-    sprockets-sass (2.0.0.beta2)
-      sprockets (>= 2.0, < 4.0)
+    sprockets-rails (3.5.2)
+      actionpack (>= 6.1)
+      activesupport (>= 6.1)
+      sprockets (>= 3.0.0)
+    stringio (3.2.0)
     strings (0.2.1)
       strings-ansi (~> 0.2)
       unicode-display_width (>= 1.5, < 3.0)
@@ -138,6 +210,7 @@ GEM
       rack (>= 1, < 3)
     thor (1.4.0)
     tilt (2.6.0)
+    tsort (0.2.0)
     tty-pager (0.14.0)
       strings (~> 0.2.0)
       tty-screen (~> 0.8)
@@ -149,7 +222,10 @@ GEM
     unicode-display_width (2.3.0)
     unicode_utils (1.4.0)
     unix_utils (0.0.15)
+    useragent (0.16.11)
+    webrick (1.9.2)
     yajl-ruby (1.4.3)
+    zeitwerk (2.7.4)
 
 PLATFORMS
   ruby
@@ -159,6 +235,7 @@ DEPENDENCIES
   better_errors
   browser
   chunky_png
+  dartsass-sprockets
   erubi
   html-pipeline
   image_optim
@@ -175,12 +252,10 @@ DEPENDENCIES
   redcarpet
   rr
   rss
-  sass
   sinatra
   sinatra-contrib
   sprockets
   sprockets-helpers
-  sprockets-sass
   terminal-table
   terser
   thin
diff --git a/README.md b/README.md
index fcdb677d84..cf6c735a76 100644
--- a/README.md
+++ b/README.md
@@ -215,7 +215,7 @@ Made something cool? Feel free to open a PR to add a new row to this table! You
 
 ## Copyright / License
 
-Copyright 2013–2025 Thibaut Courouble and [other contributors](https://github.com/freeCodeCamp/devdocs/graphs/contributors)
+Copyright 2013–2026 Thibaut Courouble and [other contributors](https://github.com/freeCodeCamp/devdocs/graphs/contributors)
 
 This software is licensed under the terms of the Mozilla Public License v2.0. See the [COPYRIGHT](./COPYRIGHT) and [LICENSE](./LICENSE) files.
 
diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss
index 12247d4405..d926c9e803 100644
--- a/assets/stylesheets/application.css.scss
+++ b/assets/stylesheets/application.css.scss
@@ -1,7 +1,3 @@
-//= depend_on sprites/docs.png
-//= depend_on sprites/docs@2x.png
-//= depend_on sprites/docs.json
-
 /*!
  * Copyright 2013-2025 Thibaut Courouble and other contributors
  *
@@ -10,133 +6,126 @@
  * http://mozilla.org/MPL/2.0/
  */
 
-@import 'global/variables-light',
-        'global/variables-dark',
-        'global/variables',
-        'global/mixins',
-        'global/icons',
-        'global/classes',
-        'global/base';
+ // SCSS partials that were formerly imported here are now invoked on an as-needed, per-file basis.
 
-@import 'components/app',
-        'components/header',
-        'components/notif',
-        'components/sidebar',
-        'components/settings',
-        'components/content',
-        'components/page',
-        'components/fail',
-        'components/path',
-        'components/notice',
-        'components/prism',
-        'components/mobile',
-        'components/environment';
+@use 'components/app';
+@use 'components/header';
+@use 'components/notif';
+@use 'components/sidebar';
+@use 'components/settings';
+@use 'components/content';
+@use 'components/page';
+@use 'components/fail';
+@use 'components/path';
+@use 'components/notice';
+@use 'components/prism';
+@use 'components/mobile';
+@use 'components/environment';
 
-@import 'pages/simple',
-        'pages/angular',
-        'pages/angularjs',
-        'pages/apache',
-        'pages/async',
-        'pages/bash',
-        'pages/bootstrap',
-        'pages/cppref',
-        'pages/cakephp',
-        'pages/clojure',
-        'pages/codeception',
-        'pages/coffeescript',
-        'pages/cordova',
-        'pages/crystal',
-        'pages/cypress',
-        'pages/d',
-        'pages/d3',
-        'pages/dart',
-        'pages/dojo',
-        'pages/drupal',
-        'pages/eigen3',
-        'pages/elixir',
-        'pages/elisp',
-        'pages/ember',
-        'pages/erlang',
-        'pages/express',
-        'pages/fastapi',
-        'pages/fluture',
-        'pages/git',
-        'pages/github',
-        'pages/gnuplot',
-        'pages/go',
-        'pages/graphite',
-        'pages/groovy',
-        'pages/gtk',
-        'pages/hapi',
-        'pages/haproxy',
-        'pages/haskell',
-        'pages/jasmine',
-        'pages/jekyll',
-        'pages/joi',
-        'pages/jq',
-        'pages/jquery',
-        'pages/julia',
-        'pages/knockout',
-        'pages/kotlin',
-        'pages/kubectl',
-        'pages/kubernetes',
-        'pages/laravel',
-        'pages/liquid',
-        'pages/lit',
-        'pages/love',
-        'pages/lua',
-        'pages/gnu_make',
-        'pages/mariadb',
-        'pages/mdn',
-        'pages/meteor',
-        'pages/mkdocs',
-        'pages/modernizr',
-        'pages/moment',
-        'pages/nginx',
-        'pages/node',
-        'pages/npm',
-        'pages/nushell',
-        'pages/octave',
-        'pages/openjdk',
-        'pages/openlayers',
-        'pages/perl',
-        'pages/phalcon',
-        'pages/phaser',
-        'pages/php',
-        'pages/phpunit',
-        'pages/postgres',
-        'pages/pug',
-        'pages/pygame',
-        'pages/python',
-        'pages/qt',
-        'pages/ramda',
-        'pages/rdoc',
-        'pages/react',
-        'pages/react_native',
-        'pages/reactivex',
-        'pages/redis',
-        'pages/rethinkdb',
-        'pages/rfc',
-        'pages/rubydoc',
-        'pages/rust',
-        'pages/rxjs',
-        'pages/sanctuary',
-        'pages/sanctuary_def',
-        'pages/sanctuary_type_classes',
-        'pages/scala',
-        'pages/sinon',
-        'pages/sphinx',
-        'pages/sphinx_simple',
-        'pages/sqlite',
-        'pages/support_tables',
-        'pages/tailwindcss',
-        'pages/tcl_tk',
-        'pages/tensorflow',
-        'pages/terraform',
-        'pages/typescript',
-        'pages/underscore',
-        'pages/vue',
-        'pages/webpack',
-        'pages/wordpress',
-        'pages/yard',
-        'pages/yii';
+@use 'pages/angular';
+@use 'pages/angularjs';
+@use 'pages/apache';
+@use 'pages/async';
+@use 'pages/bash';
+@use 'pages/bootstrap';
+@use 'pages/cppref';
+@use 'pages/cakephp';
+@use 'pages/clojure';
+@use 'pages/codeception';
+@use 'pages/coffeescript';
+@use 'pages/cordova';
+@use 'pages/crystal';
+@use 'pages/cypress';
+@use 'pages/d';
+@use 'pages/d3';
+@use 'pages/dart';
+@use 'pages/dojo';
+@use 'pages/drupal';
+@use 'pages/eigen3';
+@use 'pages/elixir';
+@use 'pages/elisp';
+@use 'pages/ember';
+@use 'pages/erlang';
+@use 'pages/express';
+@use 'pages/fastapi';
+@use 'pages/fluture';
+@use 'pages/git';
+@use 'pages/github';
+@use 'pages/gnuplot';
+@use 'pages/go';
+@use 'pages/graphite';
+@use 'pages/groovy';
+@use 'pages/gtk';
+@use 'pages/hapi';
+@use 'pages/haproxy';
+@use 'pages/haskell';
+@use 'pages/jasmine';
+@use 'pages/jekyll';
+@use 'pages/joi';
+@use 'pages/jq';
+@use 'pages/jquery';
+@use 'pages/julia';
+@use 'pages/knockout';
+@use 'pages/kotlin';
+@use 'pages/kubectl';
+@use 'pages/kubernetes';
+@use 'pages/laravel';
+@use 'pages/liquid';
+@use 'pages/lit';
+@use 'pages/love';
+@use 'pages/lua';
+@use 'pages/gnu_make';
+@use 'pages/mariadb';
+@use 'pages/mdn';
+@use 'pages/meteor';
+@use 'pages/mkdocs';
+@use 'pages/modernizr';
+@use 'pages/moment';
+@use 'pages/nginx';
+@use 'pages/node';
+@use 'pages/npm';
+@use 'pages/nushell';
+@use 'pages/octave';
+@use 'pages/openjdk';
+@use 'pages/openlayers';
+@use 'pages/perl';
+@use 'pages/phalcon';
+@use 'pages/phaser';
+@use 'pages/php';
+@use 'pages/phpunit';
+@use 'pages/postgres';
+@use 'pages/pug';
+@use 'pages/pygame';
+@use 'pages/python';
+@use 'pages/qt';
+@use 'pages/ramda';
+@use 'pages/rdoc';
+@use 'pages/react';
+@use 'pages/react_native';
+@use 'pages/reactivex';
+@use 'pages/redis';
+@use 'pages/rethinkdb';
+@use 'pages/rfc';
+@use 'pages/rubydoc';
+@use 'pages/rust';
+@use 'pages/rxjs';
+@use 'pages/sanctuary';
+@use 'pages/sanctuary_def';
+@use 'pages/sanctuary_type_classes';
+@use 'pages/scala';
+@use 'pages/sinon';
+@use 'pages/sphinx';
+@use 'pages/sphinx_simple';
+@use 'pages/sqlite';
+@use 'pages/support_tables';
+@use 'pages/tailwindcss';
+@use 'pages/tcl_tk';
+@use 'pages/tensorflow';
+@use 'pages/terraform';
+@use 'pages/typescript';
+@use 'pages/underscore';
+@use 'pages/vue';
+@use 'pages/webpack';
+@use 'pages/wordpress';
+@use 'pages/yard';
+@use 'pages/yii';
diff --git a/assets/stylesheets/components/_app.scss b/assets/stylesheets/components/_app.scss
index 96e09938ff..1edfd6d5ab 100644
--- a/assets/stylesheets/components/_app.scss
+++ b/assets/stylesheets/components/_app.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 html._booting { background: var(--contentBackground); }
 body._max-width { background: none; }
 html._booting body._max-width { background: var(--documentBackground); }
diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss
index 5522371e22..b25956e6d2 100644
--- a/assets/stylesheets/components/_content.scss
+++ b/assets/stylesheets/components/_content.scss
@@ -2,6 +2,11 @@
 // Content
 //
 
+@use 'global/base';
+@use 'global/icons';
+@use 'global/mixins' as m;
+@use 'global/classes';
+
 ._container {
   position: relative;
   z-index: var(--contentZ);
@@ -10,7 +15,7 @@
   pointer-events: none;
   @extend %border-box;
 
-  @include mobile { margin-left: var(--sidebarMediumWidth); }
+  @include m.mobile { margin-left: var(--sidebarMediumWidth); }
 
   ._sidebar-hidden & { margin-left: 0; }
   body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }
diff --git a/assets/stylesheets/components/_fail.scss b/assets/stylesheets/components/_fail.scss
index c520977e51..cc6a75e3b4 100644
--- a/assets/stylesheets/components/_fail.scss
+++ b/assets/stylesheets/components/_fail.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._fail { // Don't use CSS variables, in case the browser doesn't support them.
   display: block;
   position: relative;
diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss
index 03c302a81e..bc33d39c62 100644
--- a/assets/stylesheets/components/_header.scss
+++ b/assets/stylesheets/components/_header.scss
@@ -2,6 +2,10 @@
 // Header
 //
 
+@use 'global/icons';
+@use 'global/mixins' as m;
+@use 'global/classes';
+
 ._header {
   position: absolute;
   z-index: var(--headerZ);
@@ -17,7 +21,7 @@
   @extend %border-box;
   @extend %user-select-none;
 
-  @include mobile { width: var(--sidebarMediumWidth); }
+  @include m.mobile { width: var(--sidebarMediumWidth); }
 }
 
 ._header-left {
diff --git a/assets/stylesheets/components/_notice.scss b/assets/stylesheets/components/_notice.scss
index 1e8cd381c8..497a8989b4 100644
--- a/assets/stylesheets/components/_notice.scss
+++ b/assets/stylesheets/components/_notice.scss
@@ -1,3 +1,5 @@
+@use 'global/mixins' as m;
+
 ._notice {
   position: absolute;
   z-index: var(--noticeZ);
@@ -9,7 +11,7 @@
   background: var(--noticeBackground);
   box-shadow: inset 0 1px var(--noticeBorder);
 
-  @include mobile { left: var(--sidebarMediumWidth); }
+  @include m.mobile { left: var(--sidebarMediumWidth); }
 
   ._sidebar-hidden & { left: 0; }
 
diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss
index f0880fdd88..fbca6180d0 100644
--- a/assets/stylesheets/components/_notif.scss
+++ b/assets/stylesheets/components/_notif.scss
@@ -1,3 +1,6 @@
+@use 'global/classes';
+@use 'global/icons';
+
 ._notif, %notif {
   position: absolute;
   z-index: 2;
diff --git a/assets/stylesheets/components/_page.scss b/assets/stylesheets/components/_page.scss
index 900ed6050e..7f4778fc51 100644
--- a/assets/stylesheets/components/_page.scss
+++ b/assets/stylesheets/components/_page.scss
@@ -1,3 +1,6 @@
+@use 'global/classes';
+@use 'components/content';
+
 //
 // Page
 //
diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss
index 5853fa04fa..bd60e7f2b5 100644
--- a/assets/stylesheets/components/_path.scss
+++ b/assets/stylesheets/components/_path.scss
@@ -1,3 +1,6 @@
+@use 'global/mixins' as m;
+@use 'global/icons';
+
 ._path {
   position: absolute;
   z-index: var(--headerZ);
@@ -11,7 +14,7 @@
   background: var(--pathBackground);
   box-shadow: inset 0 1px var(--pathBorder);
 
-  @include mobile { left: var(--sidebarMediumWidth); }
+  @include m.mobile { left: var(--sidebarMediumWidth); }
 
   ._sidebar-hidden & { left: 0; }
 
diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss
index 807f550063..01cf535596 100644
--- a/assets/stylesheets/components/_settings.scss
+++ b/assets/stylesheets/components/_settings.scss
@@ -2,6 +2,9 @@
 // Settings
 //
 
+@use 'global/classes';
+@use 'global/icons';
+
 ._settings {
   display: none;
   position: absolute;
diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss
index 8813f92dac..e94fc0161d 100644
--- a/assets/stylesheets/components/_sidebar.scss
+++ b/assets/stylesheets/components/_sidebar.scss
@@ -2,6 +2,10 @@
 // Sidebar
 //
 
+@use 'global/classes';
+@use 'global/icons';
+@use 'global/mixins' as m;
+
 ._sidebar {
   position: absolute;
   z-index: var(--sidebarZ);
@@ -76,7 +80,7 @@
   box-shadow: inset -1px 0 var(--sidebarBorder);
   @extend %border-box;
 
-  @include mobile { width: var(--sidebarMediumWidth); }
+  @include m.mobile { width: var(--sidebarMediumWidth); }
 
   ._sidebar > & { min-height: 100%; }
 
@@ -311,7 +315,7 @@
           transform: translate3d(0, 0, 0);
   @extend %border-box;
 
-  @include mobile { min-width: var(--sidebarMediumWidth); }
+  @include m.mobile { min-width: var(--sidebarMediumWidth); }
 
   > ._list-text { display: inline; }
 
diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss
index 6cbc41a0fd..640ca929a5 100644
--- a/assets/stylesheets/global/_base.scss
+++ b/assets/stylesheets/global/_base.scss
@@ -1,13 +1,17 @@
+@use 'global/classes';
+@use 'global/mixins' as m;
+@use 'global/variables' as *;
+@use 'global/print';
+
 html {
   height: 100%;
   font-size: 100%;
   background: #fff; // fallback to show the error message to browsers that don't support CSS variables.
   background: var(--documentBackground);
 
-  @include mobile { font-size: 93.75%; }
+  @include m.mobile { font-size: 93.75%; }
 
-  @include print { background: none; }
-  @import 'global/print';
+  @include m.print { background: none; }
 }
 
 html._theme-default {
diff --git a/assets/stylesheets/global/_print.scss b/assets/stylesheets/global/_print.scss
index 08c14fd1f8..119bda52cb 100644
--- a/assets/stylesheets/global/_print.scss
+++ b/assets/stylesheets/global/_print.scss
@@ -1,4 +1,6 @@
-@include print {
+@use 'global/mixins' as m;
+
+@include m.print {
   ._header, ._sidebar, ._path, ._notif, ._toc, ._pre-clip, ._notice, ._links {
     display: none !important;
   }
diff --git a/assets/stylesheets/global/_variables-dark.scss b/assets/stylesheets/global/_variables-dark.scss
index b9c88491a6..23a4b0a110 100644
--- a/assets/stylesheets/global/_variables-dark.scss
+++ b/assets/stylesheets/global/_variables-dark.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 html._theme-dark {
   --absolute: white;
 
@@ -29,8 +31,8 @@ html._theme-dark {
 
   --headerBackground: #1c1c1c;
   --headerBorder: #000;
-  --searchTagBackground: #{darken(#1c1c1c, 5%)};
-  --searchBorder: #{darken(#000, 2%)};
+  --searchTagBackground: #{color.adjust(#1c1c1c, $lightness: -5%)};
+  --searchBorder: #{color.adjust(#000, $lightness: -2%)};
 
   --sidebarBackground: #24282a;
   --transparentSidebarBackground: #{rgba(#24282a, 0)};
diff --git a/assets/stylesheets/global/_variables-light.scss b/assets/stylesheets/global/_variables-light.scss
index f2dcb80721..e56e7e0839 100644
--- a/assets/stylesheets/global/_variables-light.scss
+++ b/assets/stylesheets/global/_variables-light.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 html._theme-default {
   --absolute: black;
 
@@ -29,8 +31,8 @@ html._theme-default {
 
   --headerBackground: #eee;
   --headerBorder: #d7d7d7;
-  --searchTagBackground: #{darken(#eee, 5%)};
-  --searchBorder: #{darken(#d7d7d7, 2%)};
+  --searchTagBackground: #{color.adjust(#eee, $lightness: -5%)};
+  --searchBorder: #{color.adjust(#d7d7d7, $lightness: -2%)};
 
   --sidebarBackground: #f9f9f9;
   --transparentSidebarBackground: #{rgba(#f9f9f9, 0)};
diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss
index 944db8aff0..7a86b805a9 100644
--- a/assets/stylesheets/global/_variables.scss
+++ b/assets/stylesheets/global/_variables.scss
@@ -1,3 +1,6 @@
+@use 'global/variables-light';
+@use 'global/variables-dark';
+
 // Variables needed to style the error message for browsers that don't support CSS variables.
 $baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
 $textColor: #333;
diff --git a/assets/stylesheets/pages/_angular.scss b/assets/stylesheets/pages/_angular.scss
index 18b0d93c03..92bcd93cc8 100644
--- a/assets/stylesheets/pages/_angular.scss
+++ b/assets/stylesheets/pages/_angular.scss
@@ -1,3 +1,6 @@
+@use 'global/base';
+@use 'pages/simple';
+
 ._angular {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_angularjs.scss b/assets/stylesheets/pages/_angularjs.scss
index 13f8579633..9c4da3d606 100644
--- a/assets/stylesheets/pages/_angularjs.scss
+++ b/assets/stylesheets/pages/_angularjs.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._angularjs {
   h2 { @extend %block-heading; }
 
diff --git a/assets/stylesheets/pages/_apache.scss b/assets/stylesheets/pages/_apache.scss
index ff494bb52e..c1a353d455 100644
--- a/assets/stylesheets/pages/_apache.scss
+++ b/assets/stylesheets/pages/_apache.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._apache {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_async.scss b/assets/stylesheets/pages/_async.scss
index c8961dfdad..a7c4d9b292 100644
--- a/assets/stylesheets/pages/_async.scss
+++ b/assets/stylesheets/pages/_async.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._async {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_bash.scss b/assets/stylesheets/pages/_bash.scss
index 8d3f6dd7f0..25d84c2551 100644
--- a/assets/stylesheets/pages/_bash.scss
+++ b/assets/stylesheets/pages/_bash.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._bash {
   dl > dt > code,
   dl > dt > kbd {
diff --git a/assets/stylesheets/pages/_bootstrap.scss b/assets/stylesheets/pages/_bootstrap.scss
index 42289ccb5a..1d52961e6a 100644
--- a/assets/stylesheets/pages/_bootstrap.scss
+++ b/assets/stylesheets/pages/_bootstrap.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._bootstrap {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_cakephp.scss b/assets/stylesheets/pages/_cakephp.scss
index 11825c4d8f..5b79ed3828 100644
--- a/assets/stylesheets/pages/_cakephp.scss
+++ b/assets/stylesheets/pages/_cakephp.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._cakephp {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_chef.scss b/assets/stylesheets/pages/_chef.scss
index 1314c4037f..7583e9ac3d 100644
--- a/assets/stylesheets/pages/_chef.scss
+++ b/assets/stylesheets/pages/_chef.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._chef {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_clojure.scss b/assets/stylesheets/pages/_clojure.scss
index c1b2647cc5..d5db5e14f9 100644
--- a/assets/stylesheets/pages/_clojure.scss
+++ b/assets/stylesheets/pages/_clojure.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._clojure {
   h2:not([id]) { @extend %block-heading; }
   h2[id], h3 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_codeception.scss b/assets/stylesheets/pages/_codeception.scss
index 73576a4752..09e5a68a0b 100644
--- a/assets/stylesheets/pages/_codeception.scss
+++ b/assets/stylesheets/pages/_codeception.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._codeception {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_coffeescript.scss b/assets/stylesheets/pages/_coffeescript.scss
index af4125fd76..756fb86ed3 100644
--- a/assets/stylesheets/pages/_coffeescript.scss
+++ b/assets/stylesheets/pages/_coffeescript.scss
@@ -1,3 +1,6 @@
+@use 'pages/simple';
+
+
 ._coffeescript {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_cordova.scss b/assets/stylesheets/pages/_cordova.scss
index 01231ea63e..4b20cc9698 100644
--- a/assets/stylesheets/pages/_cordova.scss
+++ b/assets/stylesheets/pages/_cordova.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._cordova {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_cppref.scss b/assets/stylesheets/pages/_cppref.scss
index f50b297ddc..1b679ae518 100644
--- a/assets/stylesheets/pages/_cppref.scss
+++ b/assets/stylesheets/pages/_cppref.scss
@@ -1,3 +1,5 @@
+@use 'global/base';
+
 ._cppref {
   > h2, > h3 { @extend %block-heading; }
   > h4 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_crystal.scss b/assets/stylesheets/pages/_crystal.scss
index 9e8904a573..9ab5736f25 100644
--- a/assets/stylesheets/pages/_crystal.scss
+++ b/assets/stylesheets/pages/_crystal.scss
@@ -1,3 +1,6 @@
+@use 'global/base';
+@use 'pages/simple';
+
 ._crystal {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_cypress.scss b/assets/stylesheets/pages/_cypress.scss
index aa1108d2ba..178d4c0994 100644
--- a/assets/stylesheets/pages/_cypress.scss
+++ b/assets/stylesheets/pages/_cypress.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._cypress {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_d.scss b/assets/stylesheets/pages/_d.scss
index 7e6721453a..d6c52a7d3f 100644
--- a/assets/stylesheets/pages/_d.scss
+++ b/assets/stylesheets/pages/_d.scss
@@ -1,3 +1,5 @@
+@use 'global/base';
+
 ._d {
   h2 { @extend %block-heading; }
   h3, .d_decl { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_d3.scss b/assets/stylesheets/pages/_d3.scss
index 8357c721bf..d3ba4401de 100644
--- a/assets/stylesheets/pages/_d3.scss
+++ b/assets/stylesheets/pages/_d3.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._d3 {
   > h2 { @extend %block-heading; }
   > h3 { @extend %block-label; }
diff --git a/assets/stylesheets/pages/_dart.scss b/assets/stylesheets/pages/_dart.scss
index fedd9883dd..b96febe084 100644
--- a/assets/stylesheets/pages/_dart.scss
+++ b/assets/stylesheets/pages/_dart.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._dart {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_dojo.scss b/assets/stylesheets/pages/_dojo.scss
index d22b1f8147..3398514380 100644
--- a/assets/stylesheets/pages/_dojo.scss
+++ b/assets/stylesheets/pages/_dojo.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._dojo {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_drupal.scss b/assets/stylesheets/pages/_drupal.scss
index 405aa83cfc..7c8eae0954 100644
--- a/assets/stylesheets/pages/_drupal.scss
+++ b/assets/stylesheets/pages/_drupal.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._drupal {
   h3 { @extend %block-heading; }
   .signature { @extend %note, %note-blue; }
diff --git a/assets/stylesheets/pages/_elisp.scss b/assets/stylesheets/pages/_elisp.scss
index f8fbe58092..3d40a23570 100644
--- a/assets/stylesheets/pages/_elisp.scss
+++ b/assets/stylesheets/pages/_elisp.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._elisp {
     dl > dt {
         @extend %block-label, %label-blue;
diff --git a/assets/stylesheets/pages/_elixir.scss b/assets/stylesheets/pages/_elixir.scss
index 240bbd83d9..2e2b55609a 100644
--- a/assets/stylesheets/pages/_elixir.scss
+++ b/assets/stylesheets/pages/_elixir.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._elixir {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_ember.scss b/assets/stylesheets/pages/_ember.scss
index 9b3f4689a7..d46775b6bc 100644
--- a/assets/stylesheets/pages/_ember.scss
+++ b/assets/stylesheets/pages/_ember.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._ember {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_erlang.scss b/assets/stylesheets/pages/_erlang.scss
index d723c1c13d..9ccad8565f 100644
--- a/assets/stylesheets/pages/_erlang.scss
+++ b/assets/stylesheets/pages/_erlang.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._erlang {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_express.scss b/assets/stylesheets/pages/_express.scss
index de1bf21ec5..7672b5bac5 100644
--- a/assets/stylesheets/pages/_express.scss
+++ b/assets/stylesheets/pages/_express.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._express {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_fastapi.scss b/assets/stylesheets/pages/_fastapi.scss
index 5f56c1ce61..b0fbb3b468 100644
--- a/assets/stylesheets/pages/_fastapi.scss
+++ b/assets/stylesheets/pages/_fastapi.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._fastapi {
   > h2 { @extend %block-heading; }
   > h3 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_fluture.scss b/assets/stylesheets/pages/_fluture.scss
index e3072c6d23..806e8c64cd 100644
--- a/assets/stylesheets/pages/_fluture.scss
+++ b/assets/stylesheets/pages/_fluture.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._fluture {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_git.scss b/assets/stylesheets/pages/_git.scss
index 1d5cad3ce0..122764ee07 100644
--- a/assets/stylesheets/pages/_git.scss
+++ b/assets/stylesheets/pages/_git.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._git {
   padding-left: 1rem;
 
diff --git a/assets/stylesheets/pages/_github.scss b/assets/stylesheets/pages/_github.scss
index bda57d4cc6..f785df9a14 100644
--- a/assets/stylesheets/pages/_github.scss
+++ b/assets/stylesheets/pages/_github.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._github {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_gnu_make.scss b/assets/stylesheets/pages/_gnu_make.scss
index 338b1668d0..79c6854d7d 100644
--- a/assets/stylesheets/pages/_gnu_make.scss
+++ b/assets/stylesheets/pages/_gnu_make.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._gnu_make {
     dl dt {
         @extend %block-label, %label-blue;
diff --git a/assets/stylesheets/pages/_gnuplot.scss b/assets/stylesheets/pages/_gnuplot.scss
index b7d584e787..8fd9cbfe6d 100644
--- a/assets/stylesheets/pages/_gnuplot.scss
+++ b/assets/stylesheets/pages/_gnuplot.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._gnuplot {
   .CENTER {
     text-align: center;
diff --git a/assets/stylesheets/pages/_go.scss b/assets/stylesheets/pages/_go.scss
index 6fd7a15e47..a82a707484 100644
--- a/assets/stylesheets/pages/_go.scss
+++ b/assets/stylesheets/pages/_go.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._go {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_graphite.scss b/assets/stylesheets/pages/_graphite.scss
index 341d581ce0..7bf392fdab 100644
--- a/assets/stylesheets/pages/_graphite.scss
+++ b/assets/stylesheets/pages/_graphite.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._graphite {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_groovy.scss b/assets/stylesheets/pages/_groovy.scss
index d8c150d165..9e71dbd4f8 100644
--- a/assets/stylesheets/pages/_groovy.scss
+++ b/assets/stylesheets/pages/_groovy.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._groovy {
   padding-left: 1rem;
 
diff --git a/assets/stylesheets/pages/_gtk.scss b/assets/stylesheets/pages/_gtk.scss
index 9df0cd3e2a..4144dda97f 100644
--- a/assets/stylesheets/pages/_gtk.scss
+++ b/assets/stylesheets/pages/_gtk.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._gtk {
   padding-left: 1rem;
 
diff --git a/assets/stylesheets/pages/_hapi.scss b/assets/stylesheets/pages/_hapi.scss
index 44ea884d23..2ac2b85bac 100644
--- a/assets/stylesheets/pages/_hapi.scss
+++ b/assets/stylesheets/pages/_hapi.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._hapi {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_haproxy.scss b/assets/stylesheets/pages/_haproxy.scss
index 24c49b4750..34db1c96ed 100644
--- a/assets/stylesheets/pages/_haproxy.scss
+++ b/assets/stylesheets/pages/_haproxy.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._haproxy {
   padding-left: 1rem;
 
diff --git a/assets/stylesheets/pages/_haskell.scss b/assets/stylesheets/pages/_haskell.scss
index 4c98f778ab..057d3e0496 100644
--- a/assets/stylesheets/pages/_haskell.scss
+++ b/assets/stylesheets/pages/_haskell.scss
@@ -1,3 +1,5 @@
+@use 'global/base';
+
 ._haskell-api {
   > h2 { @extend %block-heading; }
   > h3 { @extend %block-label; }
diff --git a/assets/stylesheets/pages/_jasmine.scss b/assets/stylesheets/pages/_jasmine.scss
index 4a4b8d464f..4ff6ec9774 100644
--- a/assets/stylesheets/pages/_jasmine.scss
+++ b/assets/stylesheets/pages/_jasmine.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._jasmine {
     .subsection-title, h2 { @extend %block-heading; }
     h4 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_jekyll.scss b/assets/stylesheets/pages/_jekyll.scss
index 00a86795e6..8320358ea1 100644
--- a/assets/stylesheets/pages/_jekyll.scss
+++ b/assets/stylesheets/pages/_jekyll.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._jekyll {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_joi.scss b/assets/stylesheets/pages/_joi.scss
index 53cd740bac..14fbac6475 100644
--- a/assets/stylesheets/pages/_joi.scss
+++ b/assets/stylesheets/pages/_joi.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._joi {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_jq.scss b/assets/stylesheets/pages/_jq.scss
index 652522238b..da236b9b7e 100644
--- a/assets/stylesheets/pages/_jq.scss
+++ b/assets/stylesheets/pages/_jq.scss
@@ -1,3 +1,6 @@
+@use 'global/base';
+@use 'pages/simple';
+
 ._jq {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_jquery.scss b/assets/stylesheets/pages/_jquery.scss
index d1a62a1cb0..ad814d5b66 100644
--- a/assets/stylesheets/pages/_jquery.scss
+++ b/assets/stylesheets/pages/_jquery.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._jquery {
   //
   // Index page
diff --git a/assets/stylesheets/pages/_julia.scss b/assets/stylesheets/pages/_julia.scss
index 4887da64c6..26b18b232d 100644
--- a/assets/stylesheets/pages/_julia.scss
+++ b/assets/stylesheets/pages/_julia.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._julia {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_knockout.scss b/assets/stylesheets/pages/_knockout.scss
index eb21ad10ff..868f1e9efe 100644
--- a/assets/stylesheets/pages/_knockout.scss
+++ b/assets/stylesheets/pages/_knockout.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._knockout {
   > h2 { @extend %block-heading; }
   > h3 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_kotlin.scss b/assets/stylesheets/pages/_kotlin.scss
index 9857a6a368..cf503a01ec 100644
--- a/assets/stylesheets/pages/_kotlin.scss
+++ b/assets/stylesheets/pages/_kotlin.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._kotlin {
   h2 { @extend %block-heading; }
   h3 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_kubectl.scss b/assets/stylesheets/pages/_kubectl.scss
index afd3090d7a..e79ff5045f 100644
--- a/assets/stylesheets/pages/_kubectl.scss
+++ b/assets/stylesheets/pages/_kubectl.scss
@@ -1,4 +1,5 @@
+@use 'pages/simple';
+
 ._kubectl {
   @extend %simple;
-
 }
diff --git a/assets/stylesheets/pages/_kubernetes.scss b/assets/stylesheets/pages/_kubernetes.scss
index 52791ba3e1..1bf3624eb6 100644
--- a/assets/stylesheets/pages/_kubernetes.scss
+++ b/assets/stylesheets/pages/_kubernetes.scss
@@ -1,4 +1,5 @@
+@use 'pages/simple';
+
 ._kubernetes {
   @extend %simple;
-
 }
diff --git a/assets/stylesheets/pages/_laravel.scss b/assets/stylesheets/pages/_laravel.scss
index cf9e11eb08..3b11a9014a 100644
--- a/assets/stylesheets/pages/_laravel.scss
+++ b/assets/stylesheets/pages/_laravel.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._laravel {
   h2 { @extend %block-heading; }
   h3 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_liquid.scss b/assets/stylesheets/pages/_liquid.scss
index 9072acc050..7fda2ed757 100644
--- a/assets/stylesheets/pages/_liquid.scss
+++ b/assets/stylesheets/pages/_liquid.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._liquid {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_lit.scss b/assets/stylesheets/pages/_lit.scss
index f0066d80a1..def8d40647 100644
--- a/assets/stylesheets/pages/_lit.scss
+++ b/assets/stylesheets/pages/_lit.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._lit {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_love.scss b/assets/stylesheets/pages/_love.scss
index a43826070b..79579f7842 100644
--- a/assets/stylesheets/pages/_love.scss
+++ b/assets/stylesheets/pages/_love.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._love {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_lua.scss b/assets/stylesheets/pages/_lua.scss
index 68cca61e54..0d4ca9bb33 100644
--- a/assets/stylesheets/pages/_lua.scss
+++ b/assets/stylesheets/pages/_lua.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._lua {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_mariadb.scss b/assets/stylesheets/pages/_mariadb.scss
index 19d8d6398b..8f30614dc4 100644
--- a/assets/stylesheets/pages/_mariadb.scss
+++ b/assets/stylesheets/pages/_mariadb.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._mariadb {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_mdn.scss b/assets/stylesheets/pages/_mdn.scss
index b551cb9ae7..1508491a84 100644
--- a/assets/stylesheets/pages/_mdn.scss
+++ b/assets/stylesheets/pages/_mdn.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._mdn {
   container-type: inline-size;
 
diff --git a/assets/stylesheets/pages/_meteor.scss b/assets/stylesheets/pages/_meteor.scss
index 5497239f78..b67d410595 100644
--- a/assets/stylesheets/pages/_meteor.scss
+++ b/assets/stylesheets/pages/_meteor.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._meteor {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_mkdocs.scss b/assets/stylesheets/pages/_mkdocs.scss
index e374474c84..e19e3c94a3 100644
--- a/assets/stylesheets/pages/_mkdocs.scss
+++ b/assets/stylesheets/pages/_mkdocs.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._mkdocs {
   h2 { @extend %block-heading; }
   h3 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_modernizr.scss b/assets/stylesheets/pages/_modernizr.scss
index eb34fe3739..297ebd4de8 100644
--- a/assets/stylesheets/pages/_modernizr.scss
+++ b/assets/stylesheets/pages/_modernizr.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._modernizr {
   h2 { @extend %block-heading; }
   h3 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_moment.scss b/assets/stylesheets/pages/_moment.scss
index eb5eb39928..2e09ac1bb1 100644
--- a/assets/stylesheets/pages/_moment.scss
+++ b/assets/stylesheets/pages/_moment.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._moment {
   > h2 { @extend %block-heading; }
   > h3 { @extend %block-label, %label-blue; }
diff --git a/assets/stylesheets/pages/_nginx.scss b/assets/stylesheets/pages/_nginx.scss
index 30d09449bf..63947fa8c4 100644
--- a/assets/stylesheets/pages/_nginx.scss
+++ b/assets/stylesheets/pages/_nginx.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._nginx {
   h4 { @extend %block-heading; }
   .note { @extend %note; }
diff --git a/assets/stylesheets/pages/_node.scss b/assets/stylesheets/pages/_node.scss
index 2853a59637..ac64d8351f 100644
--- a/assets/stylesheets/pages/_node.scss
+++ b/assets/stylesheets/pages/_node.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._node {
   // https://nodejs.org/api/documentation.html#stability-index
   .api_stability { clear: both; }
diff --git a/assets/stylesheets/pages/_npm.scss b/assets/stylesheets/pages/_npm.scss
index bdb4482d61..4951ad92a7 100644
--- a/assets/stylesheets/pages/_npm.scss
+++ b/assets/stylesheets/pages/_npm.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._npm {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_nushell.scss b/assets/stylesheets/pages/_nushell.scss
index 6aa4eb2bbf..2c9c2e76e4 100644
--- a/assets/stylesheets/pages/_nushell.scss
+++ b/assets/stylesheets/pages/_nushell.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._nushell {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_octave.scss b/assets/stylesheets/pages/_octave.scss
index 1dfc3f8ca2..ab78576da4 100644
--- a/assets/stylesheets/pages/_octave.scss
+++ b/assets/stylesheets/pages/_octave.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._octave {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_openjdk.scss b/assets/stylesheets/pages/_openjdk.scss
index 7330951a56..b3728bd4d9 100644
--- a/assets/stylesheets/pages/_openjdk.scss
+++ b/assets/stylesheets/pages/_openjdk.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._openjdk {
   @extend %simple;
   > .inheritance { @extend %note; }
diff --git a/assets/stylesheets/pages/_openlayers.scss b/assets/stylesheets/pages/_openlayers.scss
index 50628b2ff3..f5d4d6773e 100644
--- a/assets/stylesheets/pages/_openlayers.scss
+++ b/assets/stylesheets/pages/_openlayers.scss
@@ -1,3 +1,6 @@
+@use 'global/base';
+@use 'pages/simple';
+
 ._openlayers {
   @extend %simple;
   .nameContainer {
diff --git a/assets/stylesheets/pages/_perl.scss b/assets/stylesheets/pages/_perl.scss
index 777eac8eec..a35b006c7c 100644
--- a/assets/stylesheets/pages/_perl.scss
+++ b/assets/stylesheets/pages/_perl.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._perl {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_phalcon.scss b/assets/stylesheets/pages/_phalcon.scss
index 60a32758a6..ac2d6c045c 100644
--- a/assets/stylesheets/pages/_phalcon.scss
+++ b/assets/stylesheets/pages/_phalcon.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._phalcon {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_phaser.scss b/assets/stylesheets/pages/_phaser.scss
index 2effc2aee0..0c3cf5aa30 100644
--- a/assets/stylesheets/pages/_phaser.scss
+++ b/assets/stylesheets/pages/_phaser.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._phaser {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_php.scss b/assets/stylesheets/pages/_php.scss
index c6fd4d6bc6..e381dad828 100644
--- a/assets/stylesheets/pages/_php.scss
+++ b/assets/stylesheets/pages/_php.scss
@@ -1,3 +1,6 @@
+@use 'global/classes';
+@use 'components/content';
+
 ._php {
   h1 {
     margin-top: 0;
diff --git a/assets/stylesheets/pages/_phpunit.scss b/assets/stylesheets/pages/_phpunit.scss
index 2178441330..8d3ee3e4af 100644
--- a/assets/stylesheets/pages/_phpunit.scss
+++ b/assets/stylesheets/pages/_phpunit.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._phpunit {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_postgres.scss b/assets/stylesheets/pages/_postgres.scss
index 7c42a00139..b4dae591ca 100644
--- a/assets/stylesheets/pages/_postgres.scss
+++ b/assets/stylesheets/pages/_postgres.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._postgres {
   padding-left: 1rem;
 
diff --git a/assets/stylesheets/pages/_pug.scss b/assets/stylesheets/pages/_pug.scss
index 820c92118f..489bc01624 100644
--- a/assets/stylesheets/pages/_pug.scss
+++ b/assets/stylesheets/pages/_pug.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._pug {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_pygame.scss b/assets/stylesheets/pages/_pygame.scss
index 380af31f52..56bffcb150 100644
--- a/assets/stylesheets/pages/_pygame.scss
+++ b/assets/stylesheets/pages/_pygame.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._pygame {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_python.scss b/assets/stylesheets/pages/_python.scss
index 78f2d4dbe3..a557cc5c07 100644
--- a/assets/stylesheets/pages/_python.scss
+++ b/assets/stylesheets/pages/_python.scss
@@ -1,3 +1,5 @@
+@use 'pages/sphinx';
+
 ._python {
     @extend %sphinx;
   
diff --git a/assets/stylesheets/pages/_qt.scss b/assets/stylesheets/pages/_qt.scss
index 360776c060..81a5756bdb 100644
--- a/assets/stylesheets/pages/_qt.scss
+++ b/assets/stylesheets/pages/_qt.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._qt {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_ramda.scss b/assets/stylesheets/pages/_ramda.scss
index a94530575c..913292aa88 100644
--- a/assets/stylesheets/pages/_ramda.scss
+++ b/assets/stylesheets/pages/_ramda.scss
@@ -1,3 +1,6 @@
+@use 'global/base';
+@use 'pages/simple';
+
 ._ramda {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_rdoc.scss b/assets/stylesheets/pages/_rdoc.scss
index 6622e68e39..2648aa4a71 100644
--- a/assets/stylesheets/pages/_rdoc.scss
+++ b/assets/stylesheets/pages/_rdoc.scss
@@ -1,3 +1,6 @@
+@use 'global/classes';
+@use 'global/mixins' as m;
+
 ._rdoc {
   > .description, > .documentation-section { padding-left: 1rem; }
   > .description > h2, header > h3, > h2 { @extend %block-heading; }
@@ -28,7 +31,7 @@
 
     &:hover { text-decoration: underline; }
 
-    @include print {
+    @include m.print {
       display: none;
     }
   }
diff --git a/assets/stylesheets/pages/_react.scss b/assets/stylesheets/pages/_react.scss
index 6bb32bdfe2..a34d3c194a 100644
--- a/assets/stylesheets/pages/_react.scss
+++ b/assets/stylesheets/pages/_react.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._react {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_react_native.scss b/assets/stylesheets/pages/_react_native.scss
index 824c9d19da..3bf0dfd005 100644
--- a/assets/stylesheets/pages/_react_native.scss
+++ b/assets/stylesheets/pages/_react_native.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._react_native {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_reactivex.scss b/assets/stylesheets/pages/_reactivex.scss
index dd67b850a0..146267bd7c 100644
--- a/assets/stylesheets/pages/_reactivex.scss
+++ b/assets/stylesheets/pages/_reactivex.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._reactivex {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_redis.scss b/assets/stylesheets/pages/_redis.scss
index e4541f8b5a..a6237b540f 100644
--- a/assets/stylesheets/pages/_redis.scss
+++ b/assets/stylesheets/pages/_redis.scss
@@ -1,3 +1,6 @@
+@use 'global/base';
+@use 'global/classes';
+
 ._redis {
   padding-left: 1rem;
 
diff --git a/assets/stylesheets/pages/_rethinkdb.scss b/assets/stylesheets/pages/_rethinkdb.scss
index 0a64abd41f..390ef9cdf3 100644
--- a/assets/stylesheets/pages/_rethinkdb.scss
+++ b/assets/stylesheets/pages/_rethinkdb.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._rethinkdb {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_rfc.scss b/assets/stylesheets/pages/_rfc.scss
index eab55beb59..6cbc59765c 100644
--- a/assets/stylesheets/pages/_rfc.scss
+++ b/assets/stylesheets/pages/_rfc.scss
@@ -1,3 +1,5 @@
+@use 'global/base';
+
 ._rfc-pre {
   font-size: .8125rem;
   min-width: 38rem;
diff --git a/assets/stylesheets/pages/_rubydoc.scss b/assets/stylesheets/pages/_rubydoc.scss
index c28d0815ba..dcdbc83c9f 100644
--- a/assets/stylesheets/pages/_rubydoc.scss
+++ b/assets/stylesheets/pages/_rubydoc.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._rubydoc {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_rust.scss b/assets/stylesheets/pages/_rust.scss
index 47cc09ca2d..f73af8ba50 100644
--- a/assets/stylesheets/pages/_rust.scss
+++ b/assets/stylesheets/pages/_rust.scss
@@ -1,3 +1,6 @@
+@use 'global/base';
+@use 'pages/simple';
+
 ._rust {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_rxjs.scss b/assets/stylesheets/pages/_rxjs.scss
index 15e1252b6a..4c3e51620e 100644
--- a/assets/stylesheets/pages/_rxjs.scss
+++ b/assets/stylesheets/pages/_rxjs.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._rxjs {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_sanctuary.scss b/assets/stylesheets/pages/_sanctuary.scss
index 45f5a8398f..639f5551c4 100644
--- a/assets/stylesheets/pages/_sanctuary.scss
+++ b/assets/stylesheets/pages/_sanctuary.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._sanctuary {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_sanctuary_def.scss b/assets/stylesheets/pages/_sanctuary_def.scss
index 738c551c6e..ba21063379 100644
--- a/assets/stylesheets/pages/_sanctuary_def.scss
+++ b/assets/stylesheets/pages/_sanctuary_def.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._sanctuary_def {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_sanctuary_type_classes.scss b/assets/stylesheets/pages/_sanctuary_type_classes.scss
index eb20d10a8d..6bb1fd56b7 100644
--- a/assets/stylesheets/pages/_sanctuary_type_classes.scss
+++ b/assets/stylesheets/pages/_sanctuary_type_classes.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._sanctuary_type_classes {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_scala.scss b/assets/stylesheets/pages/_scala.scss
index 94b8f7b451..343c6f2e70 100644
--- a/assets/stylesheets/pages/_scala.scss
+++ b/assets/stylesheets/pages/_scala.scss
@@ -1,3 +1,7 @@
+@use 'global/base';
+@use 'global/mixins' as m;
+@use 'pages/simple';
+
 ._scala {
   @extend %simple;
   
@@ -22,7 +26,7 @@
 
     a { padding: .4em }
 
-    @include print {
+    @include m.print {
       display: none;
     }
   }
@@ -36,7 +40,7 @@
 
     &:hover { text-decoration: underline; }
 
-    @include print {
+    @include m.print {
       display: none;
     }
   }
diff --git a/assets/stylesheets/pages/_simple.scss b/assets/stylesheets/pages/_simple.scss
index 64157a8625..755f96c156 100644
--- a/assets/stylesheets/pages/_simple.scss
+++ b/assets/stylesheets/pages/_simple.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 %simple {
   padding-left: 1rem;
 
diff --git a/assets/stylesheets/pages/_sinon.scss b/assets/stylesheets/pages/_sinon.scss
index 5df93ddd92..79b24e4276 100644
--- a/assets/stylesheets/pages/_sinon.scss
+++ b/assets/stylesheets/pages/_sinon.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._sinon {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_sphinx.scss b/assets/stylesheets/pages/_sphinx.scss
index cb23ef6922..cbe8b53630 100644
--- a/assets/stylesheets/pages/_sphinx.scss
+++ b/assets/stylesheets/pages/_sphinx.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 %sphinx {
   h2 { @extend %block-heading; }
   h3 { @extend %block-label; }
diff --git a/assets/stylesheets/pages/_sphinx_simple.scss b/assets/stylesheets/pages/_sphinx_simple.scss
index cbee1ea19d..49327a95a8 100644
--- a/assets/stylesheets/pages/_sphinx_simple.scss
+++ b/assets/stylesheets/pages/_sphinx_simple.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._sphinx_simple {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_sqlite.scss b/assets/stylesheets/pages/_sqlite.scss
index b84047a54d..75ed75044b 100644
--- a/assets/stylesheets/pages/_sqlite.scss
+++ b/assets/stylesheets/pages/_sqlite.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._sqlite {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_support_tables.scss b/assets/stylesheets/pages/_support_tables.scss
index 1fc45b752f..3e90d257aa 100644
--- a/assets/stylesheets/pages/_support_tables.scss
+++ b/assets/stylesheets/pages/_support_tables.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._support_tables {
   h2 { @extend %block-heading; }
   code { @extend %label; }
diff --git a/assets/stylesheets/pages/_tcl_tk.scss b/assets/stylesheets/pages/_tcl_tk.scss
index 3731e59d52..acf87807bb 100644
--- a/assets/stylesheets/pages/_tcl_tk.scss
+++ b/assets/stylesheets/pages/_tcl_tk.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._tcl_tk {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_tensorflow.scss b/assets/stylesheets/pages/_tensorflow.scss
index 3967e9c36c..4e7a2fd418 100644
--- a/assets/stylesheets/pages/_tensorflow.scss
+++ b/assets/stylesheets/pages/_tensorflow.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._tensorflow {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_terraform.scss b/assets/stylesheets/pages/_terraform.scss
index 6b3123aad9..aacf4ef8b7 100644
--- a/assets/stylesheets/pages/_terraform.scss
+++ b/assets/stylesheets/pages/_terraform.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._terraform {
   @extend %simple;
   .note, .alert { @extend %note; }
diff --git a/assets/stylesheets/pages/_typescript.scss b/assets/stylesheets/pages/_typescript.scss
index ffe7282a12..1c49e600d6 100644
--- a/assets/stylesheets/pages/_typescript.scss
+++ b/assets/stylesheets/pages/_typescript.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._typescript {
   @extend %simple;
   .deprecated { @extend %label-red; }
diff --git a/assets/stylesheets/pages/_underscore.scss b/assets/stylesheets/pages/_underscore.scss
index f592e390bd..38e85bb13e 100644
--- a/assets/stylesheets/pages/_underscore.scss
+++ b/assets/stylesheets/pages/_underscore.scss
@@ -1,3 +1,5 @@
+@use 'global/classes';
+
 ._underscore {
   padding-left: 1rem;
 
diff --git a/assets/stylesheets/pages/_vue.scss b/assets/stylesheets/pages/_vue.scss
index 24b77e66c6..0897a2e697 100644
--- a/assets/stylesheets/pages/_vue.scss
+++ b/assets/stylesheets/pages/_vue.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._vue {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_webpack.scss b/assets/stylesheets/pages/_webpack.scss
index 487e02693d..d2a4bba59d 100644
--- a/assets/stylesheets/pages/_webpack.scss
+++ b/assets/stylesheets/pages/_webpack.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._webpack {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_wordpress.scss b/assets/stylesheets/pages/_wordpress.scss
index 1da15abd23..b995541486 100644
--- a/assets/stylesheets/pages/_wordpress.scss
+++ b/assets/stylesheets/pages/_wordpress.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._wordpress {
   @extend %simple;
 
@@ -12,4 +14,4 @@
   .callout-alert {
     @extend %note, %note-orange;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/stylesheets/pages/_yard.scss b/assets/stylesheets/pages/_yard.scss
index 195059f768..ace2ff4ab3 100644
--- a/assets/stylesheets/pages/_yard.scss
+++ b/assets/stylesheets/pages/_yard.scss
@@ -1,3 +1,6 @@
+@use 'global/classes';
+@use 'pages/simple';
+
 ._yard {
   @extend %simple;
 
diff --git a/assets/stylesheets/pages/_yii.scss b/assets/stylesheets/pages/_yii.scss
index 6cb99978dc..a53e5c3068 100644
--- a/assets/stylesheets/pages/_yii.scss
+++ b/assets/stylesheets/pages/_yii.scss
@@ -1,3 +1,5 @@
+@use 'pages/simple';
+
 ._yii {
   @extend %simple;
 
diff --git a/lib/tasks/sprites.thor b/lib/tasks/sprites.thor
index fb1b39aa5d..54df982f07 100644
--- a/lib/tasks/sprites.thor
+++ b/lib/tasks/sprites.thor
@@ -56,6 +56,9 @@ class SpritesCLI < Thor
 
     save_manifest(items, icons_per_row, 'assets/images/sprites/docs.json')
 
+    # SCSS wrapped in ERB templates must be compiled manually.
+    compile_scss_erb
+
     if options[:remove_public_icons]
       logger.info('Removing public/icons')
       FileUtils.rm_rf('public/icons')
@@ -213,6 +216,18 @@ class SpritesCLI < Thor
     "assets/images/sprites/docs#{size == 32 ? '@2x' : ''}.png"
   end
 
+  def compile_scss_erb
+    scss_erb_files = Dir['assets/stylesheets/**/*.scss.erb']
+
+    scss_erb_files.each do |erb_path|
+      scss_path = erb_path.gsub('.erb', '')
+      File.open(scss_path, 'w') do |f|
+        f.write(ERB.new(File.open(erb_path).read).result)
+        logger.info("Compiling #{erb_path} to #{scss_path}")
+      end
+    end
+  end
+
   def image_optim
     @image_optim ||= ImageOptim.new(
       :config_paths => [],