diff --git a/Gemfile b/Gemfile
index 08fb5bae..caf9e529 100644
--- a/Gemfile
+++ b/Gemfile
@@ -20,11 +20,10 @@ group :app do
   gem 'rack-ssl-enforcer'
   gem 'rack'
   gem 'rss'
-  gem 'sass'
+  gem 'sassc'
   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 c8c3484a..c9e49f00 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -84,9 +84,6 @@ GEM
     rack-test (2.1.0)
       rack (>= 1.3)
     rake (13.0.6)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
     redcarpet (3.6.0)
     rexml (3.2.6)
     rouge (1.11.1)
@@ -94,11 +91,8 @@ GEM
     rss (0.3.0)
       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)
+    sassc (2.4.0)
+      ffi (~> 1.9)
     sinatra (3.1.0)
       mustermann (~> 3.0)
       rack (~> 2.2, >= 2.2.4)
@@ -110,13 +104,11 @@ GEM
       rack-protection (= 3.1.0)
       sinatra (= 3.1.0)
       tilt (~> 2.0)
-    sprockets (3.7.2)
+    sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
+      rack (>= 2.2.4, < 4)
     sprockets-helpers (1.4.0)
       sprockets (>= 2.2)
-    sprockets-sass (2.0.0.beta2)
-      sprockets (>= 2.0, < 4.0)
     strings (0.2.1)
       strings-ansi (~> 0.2)
       unicode-display_width (>= 1.5, < 3.0)
@@ -170,12 +162,11 @@ DEPENDENCIES
   redcarpet
   rr
   rss
-  sass
+  sassc
   sinatra
   sinatra-contrib
   sprockets
   sprockets-helpers
-  sprockets-sass
   terminal-table
   terser
   thin
diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss.erb
similarity index 73%
rename from assets/stylesheets/application.css.scss
rename to assets/stylesheets/application.css.scss.erb
index 232d437e..987e8366 100644
--- a/assets/stylesheets/application.css.scss
+++ b/assets/stylesheets/application.css.scss.erb
@@ -10,11 +10,61 @@
  * http://mozilla.org/MPL/2.0/
  */
 
+/* https://github.com/rails/sass-rails/issues/139 */
+
+<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %>
+
+%svg-icon {
+  display: inline-block;
+  vertical-align: top;
+  width: 1rem;
+  height: 1rem;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+%doc-icon {
+  content: '';
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  background-image: image-url('sprites/docs.png');
+  background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+  %doc-icon { background-image: image-url('sprites/docs@2x.png'); }
+}
+
+html._theme-dark {
+  %darkIconFix {
+    filter: invert(100%) grayscale(100%);
+    -webkit-filter: invert(100%) grayscale(100%);
+  }
+}
+
+<%=
+  items = []
+
+  manifest['items'].each do |item|
+    rules = []
+    rules << "background-position: -#{item['col']}rem -#{item['row']}rem;"
+    rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix']
+    items << "._icon-#{item['type']}:before { #{rules.join(' ')} }"
+  end
+
+  items.join('')
+ %>
+
+._hide-in-development {
+  <%= App.environment != :production ? 'display: none;' : '' %>
+}
+
+
 @import 'global/variables-light',
         'global/variables-dark',
         'global/variables',
         'global/mixins',
-        'global/icons',
         'global/classes',
         'global/base';
 
@@ -29,8 +79,8 @@
         'components/path',
         'components/notice',
         'components/prism',
-        'components/mobile',
-        'components/environment';
+        'components/mobile';
+
 
 @import 'pages/simple',
         'pages/angular',
diff --git a/assets/stylesheets/components/_environment.scss.erb b/assets/stylesheets/components/_environment.scss.erb
deleted file mode 100644
index 5e2201c3..00000000
--- a/assets/stylesheets/components/_environment.scss.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-._hide-in-development {
-  <%= App.environment != :production ? 'display: none;' : '' %>
-}
diff --git a/assets/stylesheets/global/_icons.scss.erb b/assets/stylesheets/global/_icons.scss.erb
deleted file mode 100644
index b2b22c22..00000000
--- a/assets/stylesheets/global/_icons.scss.erb
+++ /dev/null
@@ -1,43 +0,0 @@
-<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %>
-
-%svg-icon {
-  display: inline-block;
-  vertical-align: top;
-  width: 1rem;
-  height: 1rem;
-  pointer-events: none;
-  fill: currentColor;
-}
-
-%doc-icon {
-  content: '';
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  background-image: image-url('sprites/docs.png');
-  background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-  %doc-icon { background-image: image-url('sprites/docs@2x.png'); }
-}
-
-html._theme-dark {
-  %darkIconFix {
-    filter: invert(100%) grayscale(100%);
-    -webkit-filter: invert(100%) grayscale(100%);
-  }
-}
-
-<%=
-  items = []
-
-  manifest['items'].each do |item|
-    rules = []
-    rules << "background-position: -#{item['col']}rem -#{item['row']}rem;"
-    rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix']
-    items << "._icon-#{item['type']}:before { #{rules.join(' ')} }"
-  end
-
-  items.join('')
- %>