diff --git a/Gemfile b/Gemfile
index 88fed0372..7ec2a39c9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -48,6 +48,7 @@ gem "redcarpet", "~> 3.6.0"
 gem "responders", "~> 3.1.1"
 gem "rinku", "~> 2.0.6", require: "rails_rinku"
 gem "ros-apartment", "~> 2.11.0", require: "apartment"
+gem "sassc-embedded", "~> 1.70.1"
 gem "sassc-rails", "~> 2.1.2"
 gem "savon", "~> 2.15.0"
 gem "sitemap_generator", "~> 6.3.0"
diff --git a/Gemfile.lock b/Gemfile.lock
index 2a813ecf5..8156acee0 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -241,6 +241,8 @@ GEM
       request_store (~> 1.0)
     globalize-accessors (0.3.0)
       globalize (>= 5.0.0)
+    google-protobuf (4.26.0)
+      rake (>= 13)
     graphiql-rails (1.8.0)
       railties
       sprockets-rails
@@ -485,9 +487,6 @@ GEM
       thor (~> 1.0)
     rainbow (3.1.1)
     rake (13.1.0)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
     rbtree3 (0.7.1)
     recipient_interceptor (0.3.1)
       mail
@@ -561,13 +560,13 @@ GEM
       capistrano (~> 3.0)
       sshkit (>= 1.2)
     safely_block (0.4.0)
-    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.72.0)
+      google-protobuf (>= 3.25, < 5.0)
+      rake (>= 13.0.0)
     sassc (2.4.0)
       ffi (~> 1.9)
+    sassc-embedded (1.70.1)
+      sass-embedded (~> 1.70)
     sassc-rails (2.1.2)
       railties (>= 4.0.0)
       sassc (>= 2.0)
@@ -757,6 +756,7 @@ DEPENDENCIES
   rubocop-rails (~> 2.23.1)
   rubocop-rspec (~> 2.27.0)
   rvm1-capistrano3 (~> 1.4.0)
+  sassc-embedded (~> 1.70.1)
   sassc-rails (~> 2.1.2)
   savon (~> 2.15.0)
   selenium-webdriver (~> 4.16.0)
diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 162671568..8f9ba72b1 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -53,8 +53,8 @@ $show-header-for-stacked: true !default;
 // 2. CONSUL DEMOCRACY variables
 // -----------------------------
 
-$body-margin: calc(50vw - #{$global-width / 2}) !default;
-$full-width-margin: unquote("#{$global-width / 2} - 50vw") !default;
+$body-margin: calc(50vw - #{$global-width * 0.5}) !default;
+$full-width-margin: unquote("#{$global-width * 0.5} - 50vw") !default;
 
 $base-font-size:      rem-calc(17) !default;
 $base-line:           rem-calc(26) !default;
@@ -160,7 +160,7 @@ $anchor-color-hover: darken($anchor-color, 20%) !default;
 $tab-background-active: $white !default;
 
 $tab-item-font-size: $base-font-size !default;
-$tab-item-padding: $line-height / 2  0 !default;
+$tab-item-padding: $line-height * 0.5  0 !default;
 $tab-content-border: $border !default;
 
 $tooltip-background-color: $brand !default;
diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index 9192029e6..afaef8113 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -436,7 +436,7 @@ $input-background-focus: $white !default;
 $input-background-disabled: $light-gray !default;
 $input-border: 1px solid $medium-gray !default;
 $input-border-focus: 1px solid $dark-gray !default;
-$input-padding: $form-spacing / 2 !default;
+$input-padding: $form-spacing * 0.5 !default;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
 $input-shadow-focus: 0 0 5px $medium-gray !default;
 $input-cursor-disabled: not-allowed !default;
@@ -778,7 +778,7 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
 $table-is-striped: true !default;
 $table-striped-background: smart-scale($table-background, $table-color-scale) !default;
 $table-stripe: even !default;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5) !default;
 $table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
 $table-foot-background: smart-scale($table-background, $table-color-scale) !default;
 $table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
diff --git a/app/assets/stylesheets/account/permissions_list.scss b/app/assets/stylesheets/account/permissions_list.scss
index fbd0a5043..6abe2165c 100644
--- a/app/assets/stylesheets/account/permissions_list.scss
+++ b/app/assets/stylesheets/account/permissions_list.scss
@@ -5,7 +5,7 @@
 
   li {
     font-size: $small-font-size;
-    margin-bottom: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
 
     &::before {
       font-size: 0.9em;
diff --git a/app/assets/stylesheets/account/verify-account.scss b/app/assets/stylesheets/account/verify-account.scss
index 2ba30afe7..dee8d3ee4 100644
--- a/app/assets/stylesheets/account/verify-account.scss
+++ b/app/assets/stylesheets/account/verify-account.scss
@@ -1,5 +1,5 @@
 .verify-account {
-  padding-right: $line-height / 2;
+  padding-right: calc(#{$line-height} / 2);
 
   .already-verified {
     @include has-fa-icon(check, solid);
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index b9cfcffb3..b19590a97 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -110,7 +110,7 @@ $table-header:   #ecf1f6;
     th {
       background: $table-header;
       color: $admin-text;
-      padding: $line-height / 2;
+      padding: calc(#{$line-height} / 2);
 
       a {
         color: inherit;
@@ -135,7 +135,7 @@ $table-header:   #ecf1f6;
     }
 
     [type="submit"] ~ a {
-      margin-left: $line-height / 2;
+      margin-left: calc(#{$line-height} / 2);
     }
 
     [type="checkbox"] {
@@ -183,11 +183,11 @@ $table-header:   #ecf1f6;
 
   .menu.simple,
   .order-links {
-    margin-bottom: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
 
     h2 {
       font-weight: bold;
-      margin-bottom: $line-height / 3;
+      margin-bottom: calc(#{$line-height} / 3);
     }
 
     .is-active {
@@ -239,7 +239,7 @@ $table-header:   #ecf1f6;
     &:hover .on-hover-block {
       display: block;
       margin: 0;
-      margin-top: $line-height / 2;
+      margin-top: calc(#{$line-height} / 2);
       width: 100%;
     }
   }
@@ -440,7 +440,7 @@ code {
   font-size: rem-calc(16);
   font-weight: normal;
   margin-bottom: $line-height;
-  padding: $line-height / 2;
+  padding: calc(#{$line-height} / 2);
 
   strong {
     font-size: rem-calc(18);
@@ -453,7 +453,7 @@ code {
   border-bottom-right-radius: rem-calc(6);
   border-top: 2px solid;
   font-size: $small-font-size;
-  padding: $line-height / 2;
+  padding: calc(#{$line-height} / 2);
 }
 
 .admin-budget-investment-info {
@@ -461,7 +461,7 @@ code {
   border: 2px solid $highlight;
   border-radius: rem-calc(4);
   margin-bottom: $line-height;
-  padding: $line-height / 2;
+  padding: calc(#{$line-height} / 2);
 
   p {
     font-size: $small-font-size;
@@ -548,7 +548,7 @@ table {
     height: $line-height * 2;
     line-height: $line-height * 2;
     margin: 0;
-    padding: 0 $line-height / 2;
+    padding: 0 calc(#{$line-height} / 2);
   }
 }
 
@@ -945,19 +945,19 @@ table {
   margin: $line-height 0;
 
   @include breakpoint(medium) {
-    margin: $line-height / 2 0 0;
+    margin: calc(#{$line-height} / 2) 0 0;
   }
 }
 
 .advanced-filters-content {
   background: $highlight;
   clear: both;
-  padding: $line-height / 2;
+  padding: calc(#{$line-height} / 2);
   margin: $line-height 0;
 
   .filter {
     display: inline-block;
-    margin: 0 $line-height / 2;
+    margin: 0 calc(#{$line-height} / 2);
 
     label {
       font-weight: normal;
@@ -966,7 +966,7 @@ table {
   }
 
   .button {
-    margin-top: $line-height / 2;
+    margin-top: calc(#{$line-height} / 2);
   }
 }
 
diff --git a/app/assets/stylesheets/admin/budget_phases/form.scss b/app/assets/stylesheets/admin/budget_phases/form.scss
index 4faa8ffd0..61fd9894e 100644
--- a/app/assets/stylesheets/admin/budget_phases/form.scss
+++ b/app/assets/stylesheets/admin/budget_phases/form.scss
@@ -29,7 +29,7 @@
 
   .button {
     &.upload-image {
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
     }
   }
 }
diff --git a/app/assets/stylesheets/admin/budgets/actions.scss b/app/assets/stylesheets/admin/budgets/actions.scss
index c72a6bfac..5d2527b29 100644
--- a/app/assets/stylesheets/admin/budgets/actions.scss
+++ b/app/assets/stylesheets/admin/budgets/actions.scss
@@ -1,7 +1,7 @@
 .admin .budgets-actions {
   > * {
     $gap: $line-height;
-    $vertical-gap: $line-height / 2;
+    $vertical-gap: $line-height * 0.5;
     @include flex-with-gap($gap);
     align-items: center;
     flex-wrap: wrap;
@@ -22,7 +22,7 @@
     dd {
       flex-basis: 20em;
       flex-grow: 1;
-      max-width: $global-width * 3 / 4;
+      max-width: calc(#{$global-width} * 3 / 4);
     }
 
     + * {
diff --git a/app/assets/stylesheets/admin/budgets/drafting.scss b/app/assets/stylesheets/admin/budgets/drafting.scss
index c343f4770..447357ea2 100644
--- a/app/assets/stylesheets/admin/budgets/drafting.scss
+++ b/app/assets/stylesheets/admin/budgets/drafting.scss
@@ -1,6 +1,6 @@
 .admin .drafting {
   $vertical-gap: nth($callout-margin, 3);
-  @include flex-with-gap($line-height / 2);
+  @include flex-with-gap($line-height * 0.5);
   align-items: flex-start;
   flex-wrap: wrap;
   margin-bottom: $line-height * 1.5;
@@ -11,7 +11,7 @@
   }
 
   .callout {
-    flex-basis: $global-width / 3;
+    flex-basis: calc(#{$global-width} / 3);
     flex-grow: 1;
     margin-bottom: 0;
   }
diff --git a/app/assets/stylesheets/admin/budgets/form.scss b/app/assets/stylesheets/admin/budgets/form.scss
index bb1a87fd5..107c789db 100644
--- a/app/assets/stylesheets/admin/budgets/form.scss
+++ b/app/assets/stylesheets/admin/budgets/form.scss
@@ -4,7 +4,7 @@
 
   .button {
     &.upload-image {
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
     }
   }
 
diff --git a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss
index 0d6c2d11b..86d9c2368 100644
--- a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss
@@ -32,7 +32,7 @@
     align-items: flex-start;
 
     + * {
-      margin-top: $line-height / 2;
+      margin-top: calc(#{$line-height} / 2);
     }
 
     .edit-link,
diff --git a/app/assets/stylesheets/admin/budgets/help.scss b/app/assets/stylesheets/admin/budgets/help.scss
index 0a055801f..0a9fc5951 100644
--- a/app/assets/stylesheets/admin/budgets/help.scss
+++ b/app/assets/stylesheets/admin/budgets/help.scss
@@ -1,7 +1,7 @@
 .admin .budgets-help {
-  $padding: $line-height / 2;
+  $padding: $line-height * 0.5;
   $quote-size: 1em;
-  $quote-padding: 2 * $quote-size / 5;
+  $quote-padding: $quote-size * 0.4;
   $quote-width: $quote-size + 2 * $quote-padding;
 
   @include has-fa-icon(quote-right, solid, after);
@@ -34,7 +34,7 @@
   }
 
   &::after {
-    bottom: $padding / 2;
+    bottom: calc(#{$padding} / 2);
     color: $white;
     position: absolute;
     right: calc(#{$padding} + #{$quote-padding});
diff --git a/app/assets/stylesheets/admin/budgets/show.scss b/app/assets/stylesheets/admin/budgets/show.scss
index f71179422..ce6ffd8c3 100644
--- a/app/assets/stylesheets/admin/budgets/show.scss
+++ b/app/assets/stylesheets/admin/budgets/show.scss
@@ -5,7 +5,7 @@
 
     @each $size, $headers in $header-styles {
       @include breakpoint($size) {
-        font-size: (rem-calc(map-get(map-get($headers, h2), font-size)) + rem-calc(map-get(map-get($headers, h3), font-size))) / 2;
+        font-size: calc(#{rem-calc(map-get(map-get($headers, h2), font-size)) + rem-calc(map-get(map-get($headers, h3), font-size))} / 2);
       }
     }
   }
diff --git a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
index 840f302b3..a17635bfc 100644
--- a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
+++ b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
@@ -9,7 +9,7 @@
     display: inline-block;
     font-size: $small-font-size;
     font-weight: bold;
-    padding: $line-height / 2 $line-height * 3 0;
+    padding: calc(#{$line-height} / 2) $line-height * 3 0;
     text-transform: uppercase;
 
     &::before {
@@ -17,7 +17,7 @@
       border-radius: 50%;
       content: "";
       height: 20px;
-      margin-left: $line-height / 2;
+      margin-left: calc(#{$line-height} / 2);
       position: absolute;
       top: -8px;
       width: 20px;
diff --git a/app/assets/stylesheets/admin/dashboard/index.scss b/app/assets/stylesheets/admin/dashboard/index.scss
index 78fe1aec3..772392b94 100644
--- a/app/assets/stylesheets/admin/dashboard/index.scss
+++ b/app/assets/stylesheets/admin/dashboard/index.scss
@@ -9,7 +9,7 @@
       &::after {
         content: "";
         display: block;
-        margin-bottom: $line-height / 3;
+        margin-bottom: calc(#{$line-height} / 3);
       }
     }
 
diff --git a/app/assets/stylesheets/admin/machine_learning/scripts.scss b/app/assets/stylesheets/admin/machine_learning/scripts.scss
index 6a516fd4e..5fc3e15d2 100644
--- a/app/assets/stylesheets/admin/machine_learning/scripts.scss
+++ b/app/assets/stylesheets/admin/machine_learning/scripts.scss
@@ -35,7 +35,7 @@
   }
 
   form {
-    max-width: $global-width * 3 / 4;
+    max-width: calc(#{$global-width} * 3 / 4);
   }
 
   select {
diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss
index 74f816408..3a6cd7514 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -113,9 +113,9 @@
 
   li {
     ul {
-      margin-left: $line-height / 1.5;
+      margin-left: calc(#{$line-height * 2} / 3);
       border-left: 1px solid $sidebar-hover;
-      padding-left: $line-height / 2;
+      padding-left: calc(#{$line-height} / 2);
     }
 
     &.is-active a,
@@ -136,7 +136,7 @@
   li a {
     color: inherit;
     display: block;
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
     vertical-align: top;
 
     &:hover {
@@ -163,11 +163,11 @@
     margin-left: $line-height;
 
     li:first-child {
-      padding-top: $line-height / 2;
+      padding-top: calc(#{$line-height} / 2);
     }
 
     li:last-child {
-      padding-bottom: $line-height / 2;
+      padding-bottom: calc(#{$line-height} / 2);
     }
 
     a {
diff --git a/app/assets/stylesheets/admin/settings/table.scss b/app/assets/stylesheets/admin/settings/table.scss
index e41467509..e6bb52324 100644
--- a/app/assets/stylesheets/admin/settings/table.scss
+++ b/app/assets/stylesheets/admin/settings/table.scss
@@ -1,7 +1,7 @@
 .admin {
   .featured-settings-table {
     td {
-      max-width: $global-width / 3;
+      max-width: calc($global-width / 3);
     }
   }
 
diff --git a/app/assets/stylesheets/admin/tenants/form.scss b/app/assets/stylesheets/admin/tenants/form.scss
index 4e68a4752..99a27e5da 100644
--- a/app/assets/stylesheets/admin/tenants/form.scss
+++ b/app/assets/stylesheets/admin/tenants/form.scss
@@ -6,10 +6,10 @@
 
   .radio-and-label {
     display: flex;
-    margin-bottom: $line-height / 3;
+    margin-bottom: calc(#{$line-height} / 3);
 
     &:last-of-type {
-      margin-bottom: $line-height * 2 / 3;
+      margin-bottom: calc(#{$line-height * 2} / 3);
     }
 
     input {
diff --git a/app/assets/stylesheets/advanced_search.scss b/app/assets/stylesheets/advanced_search.scss
index 344176a48..9412080ff 100644
--- a/app/assets/stylesheets/advanced_search.scss
+++ b/app/assets/stylesheets/advanced_search.scss
@@ -37,7 +37,7 @@
     @include breakpoint(medium) {
       align-self: flex-end;
       margin-bottom: 0;
-      margin-top: $line-height / 4;
+      margin-top: calc(#{$line-height} / 4);
     }
   }
 
diff --git a/app/assets/stylesheets/annotator_overrides.scss b/app/assets/stylesheets/annotator_overrides.scss
index c4af1c311..59c8a54f9 100644
--- a/app/assets/stylesheets/annotator_overrides.scss
+++ b/app/assets/stylesheets/annotator_overrides.scss
@@ -11,42 +11,42 @@
   background: rgba(255, 249, 218, 0.75);
 
   &.weight-1 {
-    background: hsla(50, 100, 93, 0.5);
+    background: hsla(50, 100%, 93%, 0.5);
 
     .weight-1 {
-      background: hsla(50, 100, 93, 0.75);
+      background: hsla(50, 100%, 93%, 0.75);
     }
   }
 
   &.weight-2 {
-    background: hsla(63, 78, 86, 0.5);
+    background: hsla(63, 78%, 86%, 0.5);
 
     .weight-2 {
-      background: hsla(63, 78, 86, 0.75);
+      background: hsla(63, 78%, 86%, 0.75);
     }
   }
 
   &.weight-3 {
-    background: hsla(52, 100, 85, 0.5);
+    background: hsla(52, 100%, 85%, 0.5);
 
     .weight-3 {
-      background: hsla(52, 100, 85, 0.75);
+      background: hsla(52, 100%, 85%, 0.75);
     }
   }
 
   &.weight-4 {
-    background: hsla(51, 91, 75, 0.5);
+    background: hsla(51, 91%, 75%, 0.5);
 
     .weight-4 {
-      background: hsla(51, 91, 75, 0.75);
+      background: hsla(51, 91%, 75%, 0.75);
     }
   }
 
   &.weight-5 {
-    background: hsla(46, 83, 60, 0.5);
+    background: hsla(46, 83%, 60%, 0.5);
 
     .weight-5 {
-      background: hsla(46, 83, 60, 0.5);
+      background: hsla(46, 83%, 60%, 0.5);
     }
   }
 }
diff --git a/app/assets/stylesheets/autocomplete_overrides.scss b/app/assets/stylesheets/autocomplete_overrides.scss
index 25c759d8c..7021c2dab 100644
--- a/app/assets/stylesheets/autocomplete_overrides.scss
+++ b/app/assets/stylesheets/autocomplete_overrides.scss
@@ -12,7 +12,7 @@
 ----------------------------------*/
 .ui-menu {
   list-style: none;
-  padding: $line-height / 4 $line-height / 3;
+  padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
   display: block;
   background: $body-background;
   border: 1px solid $border;
@@ -21,7 +21,7 @@
   .ui-menu-item {
 
     .ui-menu-item-wrapper {
-      padding: $line-height / 4 $line-height / 3;
+      padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
       position: relative;
     }
 
diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss
index 5dc193fd0..ea9d598b6 100644
--- a/app/assets/stylesheets/budgets/ballot/investment.scss
+++ b/app/assets/stylesheets/budgets/ballot/investment.scss
@@ -1,12 +1,12 @@
 .ballot-list li {
-  $side-padding: $line-height / 2;
+  $side-padding: $line-height * 0.5;
   $close-icon-size: rem-calc(20);
   $close-icon-margin: rem-calc(6);
 
   background: #f1f1f1;
   border-radius: rem-calc(12);
   line-height: $line-height;
-  margin-bottom: $line-height / 4;
+  margin-bottom: calc(#{$line-height} / 4);
   padding: $line-height $side-padding;
   position: relative;
 
@@ -23,7 +23,7 @@
     @include brand-color;
     display: block;
     font-weight: bold;
-    margin-top: $line-height / 2;
+    margin-top: calc(#{$line-height} / 2);
     text-align: right;
   }
 
diff --git a/app/assets/stylesheets/budgets/executions/filters.scss b/app/assets/stylesheets/budgets/executions/filters.scss
index 9517f4d20..1cef35df4 100644
--- a/app/assets/stylesheets/budgets/executions/filters.scss
+++ b/app/assets/stylesheets/budgets/executions/filters.scss
@@ -1,5 +1,5 @@
 .budget-executions-filters {
-  margin-bottom: $line-height / 2;
+  margin-bottom: calc(#{$line-height} / 2);
 
   @include breakpoint(medium) {
     @include flex-with-gap(1em);
diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index dafc3317c..76c90cb2e 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -1,5 +1,5 @@
 .public .groups-and-headings {
-  $spacing: $line-height / 2;
+  $spacing: $line-height * 0.5;
 
   .headings-list {
     @include flex-with-gap($spacing);
@@ -13,9 +13,9 @@
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    margin-bottom: $line-height / 2;
-    margin-top: $line-height / 4;
-    padding: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
+    margin-top: calc(#{$line-height} / 4);
+    padding: calc(#{$line-height} / 2);
     width: 100%;
 
     @include breakpoint(medium) {
@@ -38,7 +38,7 @@
     span {
       display: block;
       font-size: $small-font-size;
-      padding-top: $line-height / 2;
+      padding-top: calc(#{$line-height} / 2);
     }
   }
 }
diff --git a/app/assets/stylesheets/budgets/investments-list.scss b/app/assets/stylesheets/budgets/investments-list.scss
index f94f991d1..9bd83084b 100644
--- a/app/assets/stylesheets/budgets/investments-list.scss
+++ b/app/assets/stylesheets/budgets/investments-list.scss
@@ -15,7 +15,7 @@
     display: flex;
     flex-direction: column;
     padding: 0;
-    margin-bottom: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
     position: relative;
     width: 100%;
 
diff --git a/app/assets/stylesheets/budgets/investmentss/filters.scss b/app/assets/stylesheets/budgets/investmentss/filters.scss
index a00be0801..e59aa3c8f 100644
--- a/app/assets/stylesheets/budgets/investmentss/filters.scss
+++ b/app/assets/stylesheets/budgets/investmentss/filters.scss
@@ -8,8 +8,8 @@
 
     a {
       display: inline-block;
-      padding-bottom: $line-height / 4;
-      padding-top: $line-height / 4;
+      padding-bottom: calc(#{$line-height} / 4);
+      padding-top: calc(#{$line-height} / 4);
     }
 
     [aria-current] {
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index 7c67897a6..0d4ad8e0d 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -21,13 +21,13 @@
       display: block;
       font-size: rem-calc(36);
       font-weight: bold;
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
     }
   }
 
   .phase-title {
     @include tabs-title;
-    margin: $line-height / 6;
+    margin: calc(#{$line-height} / 6);
     margin-left: 0;
     position: relative;
     text-align: center;
@@ -99,7 +99,7 @@
 
     &.current-phase-tab a {
       @include brand-secondary-background;
-      padding-top: $line-height / 2;
+      padding-top: calc(#{$line-height} / 2);
     }
   }
 
@@ -107,7 +107,7 @@
     display: block;
     font-size: $small-font-size;
     font-weight: bold;
-    margin-bottom: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
     text-transform: uppercase;
   }
 
@@ -136,8 +136,8 @@
       border-radius: rem-calc(3);
       display: flex;
       font-size: rem-calc(36);
-      height: 1em * 4 / 3;
-      width: 1em * 4 / 3;
+      height: calc(4em / 3);
+      width: calc(4em / 3);
 
       &::before {
         margin: auto;
diff --git a/app/assets/stylesheets/budgets/subheader.scss b/app/assets/stylesheets/budgets/subheader.scss
index ee27b48f2..87453242b 100644
--- a/app/assets/stylesheets/budgets/subheader.scss
+++ b/app/assets/stylesheets/budgets/subheader.scss
@@ -8,7 +8,7 @@
   }
 
   .button {
-    margin-top: $line-height / 2;
+    margin-top: calc(#{$line-height} / 2);
   }
 
   .callout {
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index 33b05414d..746f7b1a2 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -25,7 +25,7 @@
 
   .label {
     display: inline-block;
-    margin-left: $line-height / 2;
+    margin-left: calc(#{$line-height} / 2);
     vertical-align: top;
   }
 }
@@ -34,13 +34,13 @@
   border: 2px solid $highlight;
   border-radius: rem-calc(6);
   margin-bottom: $line-height;
-  padding: $line-height / 2;
+  padding: calc(#{$line-height} / 2);
   text-align: center;
 
   @include breakpoint(medium only) {
     .change-behaviour {
       float: left;
-      margin-top: $line-height / 2;
+      margin-top: calc(#{$line-height} / 2);
       padding: $line-height;
       width: 100%;
     }
@@ -69,7 +69,7 @@
   .progress {
     background: #f0efea;
     border-radius: rem-calc(6);
-    height: $line-height / 2;
+    height: calc(#{$line-height} / 2);
   }
 
   .progress-meter {
@@ -109,7 +109,7 @@
 
   .action-content {
     display: inline-block;
-    margin-left: $line-height / 4;
+    margin-left: calc(#{$line-height} / 4);
     max-width: 90%;
     word-break: break-all;
 
@@ -118,7 +118,7 @@
     }
 
     .label {
-      margin-left: $line-height / 2;
+      margin-left: calc(#{$line-height} / 2);
     }
 
     a {
@@ -155,7 +155,7 @@
     border-radius: rem-calc(4);
     display: inline-block;
     height: rem-calc(20);
-    margin-top: $line-height / 6;
+    margin-top: calc(#{$line-height} / 6);
     width: rem-calc(20);
   }
 }
@@ -251,7 +251,7 @@
   .help-text {
     color: $text-medium;
     display: block;
-    padding-top: $line-height / 4;
+    padding-top: calc(#{$line-height} / 4);
   }
 }
 
@@ -309,7 +309,7 @@
     display: inline-block;
     font-size: rem-calc(24);
     line-height: $line-height;
-    padding: $line-height / 2 $line-height / 4;
+    padding: calc(#{$line-height} / 2) calc(#{$line-height} / 4);
     padding-left: 0;
     vertical-align: middle;
   }
@@ -323,7 +323,7 @@
 
     &.resources {
       border-left: 1px solid $border;
-      margin-left: $line-height / 2;
+      margin-left: calc(#{$line-height} / 2);
     }
   }
 
@@ -447,7 +447,7 @@
 .community-poll {
   border-bottom: 1px solid $border;
   margin-bottom: $line-height;
-  padding-bottom: $line-height / 2;
+  padding-bottom: calc(#{$line-height} / 2);
 }
 
 // 09. Email preview
diff --git a/app/assets/stylesheets/documents/document.scss b/app/assets/stylesheets/documents/document.scss
index 47137d6c7..54ecd651c 100644
--- a/app/assets/stylesheets/documents/document.scss
+++ b/app/assets/stylesheets/documents/document.scss
@@ -1,6 +1,6 @@
 .document {
   + .document {
-    margin-top: $line-height / 3;
+    margin-top: calc(#{$line-height} / 3);
   }
 
   a:first-of-type {
diff --git a/app/assets/stylesheets/documents/documents.scss b/app/assets/stylesheets/documents/documents.scss
index 6aab0c133..1d48cfc37 100644
--- a/app/assets/stylesheets/documents/documents.scss
+++ b/app/assets/stylesheets/documents/documents.scss
@@ -10,7 +10,7 @@
   }
 
   ul li {
-    padding-top: $line-height / 2;
+    padding-top: calc(#{$line-height} / 2);
 
     &:not(:first-child) {
       border-top: 1px solid $highlight;
@@ -22,8 +22,8 @@
     border: 2px solid $highlight;
     border-radius: rem-calc(5);
     display: block;
-    margin: $line-height / 2 0;
-    padding: $line-height / 2;
+    margin: calc(#{$line-height} / 2) 0;
+    padding: calc(#{$line-height} / 2);
     position: relative;
 
     p {
diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss
index a4dd6972c..0a0fd3123 100644
--- a/app/assets/stylesheets/in_favor_against.scss
+++ b/app/assets/stylesheets/in_favor_against.scss
@@ -1,8 +1,8 @@
 .in-favor-against {
-  @include flex-with-gap($line-height / 4);
+  @include flex-with-gap($line-height * 0.25);
 
   @include breakpoint(medium) {
-    @include flex-with-gap($line-height * 3 / 4);
+    @include flex-with-gap($line-height * 0.75);
   }
 
   &,
@@ -75,7 +75,7 @@
     display: inline-block;
     font-size: $small-font-size;
     line-height: $line-height * 2;
-    padding-right: $line-height / 2;
+    padding-right: calc(#{$line-height} / 2);
     vertical-align: top;
 
     @include breakpoint(medium) {
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 26957cbba..2469052d8 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -226,12 +226,12 @@ button,
 .menu.simple {
   border-bottom: 1px solid $border;
   clear: both;
-  margin-bottom: $line-height / 2;
+  margin-bottom: calc(#{$line-height} / 2);
 
   li {
     font-size: $base-font-size;
     margin-bottom: 0;
-    margin-right: $line-height / 2;
+    margin-right: calc(#{$line-height} / 2);
 
     @include breakpoint(medium) {
       margin-right: $line-height * 1.5;
@@ -256,7 +256,7 @@ button,
     }
 
     &:not(.is-active) {
-      margin-bottom: $line-height / 3;
+      margin-bottom: calc(#{$line-height} / 3);
     }
   }
 
@@ -314,7 +314,7 @@ button,
 }
 
 .close-button {
-  top: $line-height / 2;
+  top: calc(#{$line-height} / 2);
 }
 
 .back,
@@ -322,7 +322,7 @@ button,
   clear: both;
   color: $text-medium;
   display: inline-block;
-  padding-right: $line-height / 2;
+  padding-right: calc(#{$line-height} / 2);
 }
 
 .back:not([class^="icon-"]) {
@@ -378,7 +378,7 @@ button,
 }
 
 .button.float-right ~ .button.float-right {
-  margin: 0 $line-height / 2;
+  margin: 0 calc(#{$line-height} / 2);
 }
 
 .pagination .current {
@@ -643,13 +643,13 @@ body > header,
 .submenu {
   border-bottom: 1px solid $border;
   clear: both;
-  margin-bottom: $line-height / 2;
+  margin-bottom: calc(#{$line-height} / 2);
 
   a {
     @include text-colored-link;
     display: inline-block;
     font-weight: bold;
-    margin-right: $line-height / 2;
+    margin-right: calc(#{$line-height} / 2);
     position: relative;
     text-align: left;
 
@@ -737,7 +737,7 @@ footer {
 .subfooter {
   border-top: 1px solid $text-light;
   font-size: $small-font-size;
-  padding-top: $line-height / 2;
+  padding-top: calc(#{$line-height} / 2);
 
   .legal {
     display: inline-block;
@@ -788,8 +788,8 @@ footer {
   display: inline-block;
   font-size: rem-calc(16);
   font-weight: bold;
-  margin: -1px 0 $line-height / 2;
-  padding-top: $line-height / 4;
+  margin: -1px 0 calc(#{$line-height} / 2);
+  padding-top: calc(#{$line-height} / 4);
   text-transform: uppercase;
 }
 
@@ -850,9 +850,9 @@ footer {
     background: $body-background;
     box-decoration-break: clone;
     font-weight: bold;
-    padding: 0 $line-height / 2;
+    padding: 0 calc(#{$line-height} / 2);
     position: relative;
-    top: -$line-height / 2;
+    top: calc(#{-$line-height} / 2);
   }
 }
 
@@ -908,7 +908,7 @@ form {
   }
 
   [type=file] {
-    margin: $line-height / 2 0 $line-height / 2 $line-height / 4;
+    margin: calc(#{$line-height} / 2) 0 calc(#{$line-height} / 2) calc(#{$line-height} / 4);
   }
 
   .cke {
@@ -1034,7 +1034,7 @@ form {
   background: $alert-bg;
   color: $color-alert;
   display: inline-block;
-  margin: 0 $line-height / 4;
+  margin: 0 calc(#{$line-height} / 4);
 
   a {
     color: $color-alert;
@@ -1056,7 +1056,7 @@ form {
 
   select {
     height: $line-height * 2;
-    margin-right: $line-height / 2;
+    margin-right: calc(#{$line-height} / 2);
   }
 
   .final-votes-info {
@@ -1064,10 +1064,10 @@ form {
     border: 1px solid $warning-border;
     color: $color-warning;
     margin-top: $line-height;
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
 
     ul li {
-      margin: $line-height / 2 0;
+      margin: calc(#{$line-height} / 2) 0;
     }
 
     .icon-box {
@@ -1114,9 +1114,9 @@ form {
 .notification {
   border: 1px solid $border;
   display: block;
-  margin-bottom: $line-height / 4;
+  margin-bottom: calc(#{$line-height} / 4);
   margin-left: $line-height;
-  padding: $line-height / 2 $line-height;
+  padding: calc(#{$line-height} / 2) $line-height;
   position: relative;
 
   @include breakpoint(medium) {
@@ -1230,7 +1230,7 @@ table {
 
     td {
       line-height: $line-height;
-      padding: $line-height / 2 $line-height / 4;
+      padding: calc(#{$line-height} / 2) calc(#{$line-height} / 4);
     }
 
     &:nth-child(odd) {
@@ -1293,7 +1293,7 @@ table {
   width: $icon-width;
 
   &::before {
-    font-size: $icon-width / 2;
+    font-size: calc(#{$icon-width} / 2);
     margin-right: 0;
   }
 
@@ -1396,7 +1396,7 @@ table {
 
   @include breakpoint(medium) {
     .left + .left {
-      margin-left: $line-height / 2;
+      margin-left: calc(#{$line-height} / 2);
     }
   }
 
@@ -1428,7 +1428,7 @@ table {
     background: #f6f6f6;
     font-weight: bold;
     line-height: rem-calc(20);
-    padding-top: $line-height / 4;
+    padding-top: calc(#{$line-height} / 4);
     text-transform: uppercase;
     vertical-align: top;
 
@@ -1460,7 +1460,7 @@ table {
 
   .button + form {
     display: inline-block;
-    margin-left: $line-height / 2;
+    margin-left: calc(#{$line-height} / 2);
   }
 
   .verification-list {
@@ -1509,7 +1509,7 @@ table {
       color: $color-info;
       font-size: rem-calc(24);
       margin-left: -27px;
-      padding: 0 $line-height / 2;
+      padding: 0 calc(#{$line-height} / 2);
       position: absolute;
       top: -12px;
     }
@@ -1540,7 +1540,7 @@ table {
 
   .comment {
     line-height: $list-lineheight;
-    margin: $line-height / 4 0;
+    margin: calc(#{$line-height} / 4) 0;
     position: relative;
 
     p {
@@ -1559,7 +1559,7 @@ table {
 .notification-body {
 
   img {
-    margin-right: $line-height / 2;
+    margin-right: calc(#{$line-height} / 2);
   }
 
   .reply {
@@ -1567,8 +1567,8 @@ table {
     border-left: 0;
     border-right: 0;
     font-size: $small-font-size;
-    margin: $line-height / 4 0;
-    padding: $line-height / 4;
+    margin: calc(#{$line-height} / 4) 0;
+    padding: calc(#{$line-height} / 4);
     position: relative;
 
     &:empty {
@@ -1581,7 +1581,7 @@ table {
     }
 
     .comment-form form {
-      margin-top: $line-height / 2;
+      margin-top: calc(#{$line-height} / 2);
     }
   }
 
@@ -1629,8 +1629,8 @@ table {
   }
 
   .comment-user {
-    margin-top: $line-height / 4;
-    padding: $line-height / 4 0;
+    margin-top: calc(#{$line-height} / 4);
+    padding: calc(#{$line-height} / 4) 0;
     overflow: hidden;
 
     &.level-1,
@@ -1642,7 +1642,7 @@ table {
     &.is-admin,
     &.is-moderator {
       background: rgba(70, 219, 145, 0.3);
-      padding: $line-height / 4 $line-height / 2;
+      padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
     }
 
     &.level-1 {
@@ -1662,7 +1662,7 @@ table {
 }
 
 .comment-list {
-  margin: $line-height / 4 0;
+  margin: calc(#{$line-height} / 4) 0;
 
   .comment-list {
     border-left: 1px dashed $border;
@@ -1783,7 +1783,7 @@ table {
 .public-interests {
 
   li {
-    margin-right: $line-height / 4;
+    margin-right: calc(#{$line-height} / 4);
 
     span {
       background: none;
@@ -1796,10 +1796,10 @@ table {
 
   .follow-list {
     list-style-type: circle;
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
 
     li {
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
       margin-left: $line-height;
     }
   }
@@ -1861,7 +1861,7 @@ table {
   }
 
   .card {
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
 
     .card {
       border: 0;
@@ -1975,7 +1975,7 @@ table {
   background: #fafafa;
   margin-bottom: $line-height;
   margin-top: rem-calc(-25);
-  padding: $line-height 0 $line-height / 2;
+  padding: $line-height 0 calc(#{$line-height} / 2);
 
   @include breakpoint(medium) {
     padding-top: 0;
@@ -2003,8 +2003,8 @@ table {
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
-    margin-bottom: $line-height / 4;
-    padding: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 4);
+    padding: calc(#{$line-height} / 2);
     z-index: 1;
 
     &:hover:not(:focus-within) {
@@ -2028,8 +2028,8 @@ table {
   background: $highlight-soft;
   border: 1px solid $highlight;
   display: block;
-  margin: $line-height / 2 0;
-  padding: $line-height / 2;
+  margin: calc(#{$line-height} / 2) 0;
+  padding: calc(#{$line-height} / 2);
   position: relative;
 
   a {
@@ -2124,8 +2124,8 @@ table {
 
     &::before {
       $button-padding-left: nth($button-padding, 2);
-      margin-left: -$button-padding-left / 2;
-      margin-right: $button-padding-left / 2;
+      margin-left: calc(#{-$button-padding-left} / 2);
+      margin-right: calc(#{$button-padding-left} / 2);
     }
   }
 }
@@ -2193,7 +2193,7 @@ table {
 
     p,
     .sdg-tag-list {
-      padding: 0 $line-height / 4;
+      padding: 0 calc(#{$line-height} / 4);
     }
   }
 
@@ -2210,7 +2210,7 @@ table {
       @include brand-border(top, 4px);
       display: inline-block;
       margin-bottom: 0;
-      padding: $line-height / 2 0;
+      padding: calc(#{$line-height} / 2) 0;
     }
   }
 
@@ -2232,7 +2232,7 @@ table {
       border-bottom: 1px solid $border;
       display: block;
       font-size: $small-font-size;
-      margin: $line-height 0 $line-height / 2;
+      margin: $line-height 0 calc(#{$line-height} / 2);
       text-align: right;
       width: 100%;
     }
@@ -2276,7 +2276,7 @@ table {
     font-size: rem-calc(24);
     line-height: rem-calc(24);
     text-transform: uppercase;
-    padding: $line-height / 4 $line-height / 2;
+    padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
     position: absolute;
     width: 100%;
     z-index: 3;
@@ -2300,7 +2300,7 @@ table {
       display: inline-block;
       font-size: $small-font-size;
       font-weight: bold;
-      margin-bottom: $line-height / 4;
+      margin-bottom: calc(#{$line-height} / 4);
       padding: rem-calc(4) rem-calc(8);
     }
   }
@@ -2316,7 +2316,7 @@ table {
     select {
       float: left;
       width: 30%;
-      margin-right: $line-height / 4;
+      margin-right: calc(#{$line-height} / 4);
     }
   }
 }
diff --git a/app/assets/stylesheets/layout/account_menu.scss b/app/assets/stylesheets/layout/account_menu.scss
index 385513af8..8e6e2ab6a 100644
--- a/app/assets/stylesheets/layout/account_menu.scss
+++ b/app/assets/stylesheets/layout/account_menu.scss
@@ -1,7 +1,7 @@
 .account-menu.menu {
 
   @include breakpoint(small only) {
-    margin-top: $line-height / 2;
+    margin-top: calc(#{$line-height} / 2);
 
     &,
     .menu {
diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss
index c403d15cc..a67251901 100644
--- a/app/assets/stylesheets/layout/locale_switcher.scss
+++ b/app/assets/stylesheets/layout/locale_switcher.scss
@@ -1,6 +1,6 @@
 .locale {
-  margin-bottom: $line-height / 4;
-  margin-top: $line-height / 4;
+  margin-bottom: calc(#{$line-height} / 4);
+  margin-top: calc(#{$line-height} / 4);
   position: relative;
 
   .locale-form {
@@ -34,8 +34,8 @@
       height: $line-height;
       margin-bottom: 0;
       outline: none;
-      padding-left: $line-height / 4;
-      padding-right: calc(#{$line-height / 4} + 1em);
+      padding-left: calc(#{$line-height} / 4);
+      padding-right: calc(#{$line-height} / 4 + 1em);
       transition: none;
       width: auto;
 
diff --git a/app/assets/stylesheets/layout/social.scss b/app/assets/stylesheets/layout/social.scss
index 69f44a5d2..b7abf5bcf 100644
--- a/app/assets/stylesheets/layout/social.scss
+++ b/app/assets/stylesheets/layout/social.scss
@@ -3,7 +3,7 @@
   text-align: right;
 
   @include breakpoint(medium) {
-    width: 1 * 100% / 3;
+    width: calc(100% / 3);
   }
 
   ul {
@@ -16,7 +16,7 @@
 
   a {
     font-size: rem-calc(24);
-    margin: 0 $line-height / 2;
+    margin: 0 calc(#{$line-height} / 2);
     text-decoration: none;
 
     &:hover {
diff --git a/app/assets/stylesheets/layout/subnavigation.scss b/app/assets/stylesheets/layout/subnavigation.scss
index e67a3b5a5..8165bcf7b 100644
--- a/app/assets/stylesheets/layout/subnavigation.scss
+++ b/app/assets/stylesheets/layout/subnavigation.scss
@@ -27,8 +27,8 @@
   a {
     color: inherit;
     display: inline-block;
-    padding-bottom: $line-height / 2;
-    padding-top: $line-height / 2;
+    padding-bottom: calc(#{$line-height} / 2);
+    padding-top: calc(#{$line-height} / 2);
     position: relative;
     text-align: left;
 
@@ -53,7 +53,7 @@
   }
 
   .input-group {
-    padding-top: $line-height / 4;
+    padding-top: calc(#{$line-height} / 4);
 
     @include breakpoint(medium) {
       margin-bottom: 0;
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index a18266d97..e0578ce1b 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -70,7 +70,7 @@
       border-top-left-radius: rem-calc(6);
       border-top-right-radius: rem-calc(6);
       margin-bottom: 0;
-      margin-right: $line-height / 4;
+      margin-right: calc(#{$line-height} / 4);
       margin-top: 0;
 
       &:hover:not(.is-active) {
@@ -84,7 +84,7 @@
 
     a {
       display: block;
-      padding: $line-height / 4 $line-height / 2;
+      padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
 
       @include breakpoint(large) {
         display: inline-block;
@@ -245,9 +245,9 @@
       color: #555;
       cursor: pointer;
       display: inline-block;
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
       margin-right: $line-height;
-      padding: $line-height / 2  $line-height * 2;
+      padding: calc(#{$line-height} / 2)  $line-height * 2;
       position: relative;
     }
 
@@ -455,7 +455,7 @@
 
       @include breakpoint(medium) {
         margin: 0 auto;
-        max-width: 3 * $grid-row-width / 4;
+        max-width: calc(3 * #{$grid-row-width} / 4);
         padding: rem-calc(32) rem-calc(32) rem-calc(32) rem-calc(48);
       }
 
@@ -670,7 +670,7 @@
 
         .comment {
           border-bottom: 1px solid $border;
-          padding-bottom: $line-height / 2;
+          padding-bottom: calc(#{$line-height} / 2);
           margin-bottom: rem-calc(16);
           font-size: $small-font-size;
 
@@ -955,17 +955,17 @@
     padding-top: rem-calc(16);
 
     &:not(:last-child) {
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
     }
   }
 
   .question-title:not(:only-child) {
-    margin-bottom: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
   }
 
   .annotation-title {
-    margin-bottom: $line-height / 2;
-    margin-top: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
+    margin-top: calc(#{$line-height} / 2);
   }
 
   .annotation-quote {
@@ -974,7 +974,7 @@
   }
 
   .comment-summary {
-    margin-bottom: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
 
     > :first-child {
       background-color: rgba(217, 216, 243, 0.2);
diff --git a/app/assets/stylesheets/map_location.scss b/app/assets/stylesheets/map_location.scss
index f613d1dd6..6c81aa187 100644
--- a/app/assets/stylesheets/map_location.scss
+++ b/app/assets/stylesheets/map_location.scss
@@ -4,7 +4,7 @@
   color: $delete;
   cursor: pointer;
   margin-bottom: $line-height;
-  margin-top: $line-height / 2;
+  margin-top: calc(#{$line-height} / 2);
 
   &:hover,
   &:active,
diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index addc2d117..30011cd0f 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -30,7 +30,7 @@ $progress-bar-color:      #fea230;
     }
 
     .milestone-progress .row {
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
     }
   }
 }
@@ -68,7 +68,7 @@ $progress-bar-color:      #fea230;
   }
 
   .milestone-content {
-    padding: $line-height / 6 $line-height / 2;
+    padding: calc(#{$line-height} / 6) calc(#{$line-height} / 2);
     position: relative;
 
     @include breakpoint(medium) {
@@ -121,6 +121,6 @@ $progress-bar-color:      #fea230;
   @include background-with-text-contrast($budget);
   border-radius: rem-calc(4);
   display: inline-block;
-  margin-top: $line-height / 6;
-  padding: $line-height / 4 $line-height / 2;
+  margin-top: calc(#{$line-height} / 6);
+  padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
 }
diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss
index 4516b8b73..66c898cd7 100644
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/app/assets/stylesheets/mixins/forms.scss
@@ -22,7 +22,7 @@
     $icon-size: $line-height * 4;
     $padding-right: rem-calc(20);
     $icon-size-with-padding: $icon-size + $padding-right;
-    $polygon-size: $icon-size / 2;
+    $polygon-size: $icon-size * 0.5;
     @include background-till-left-of-screen;
     @include brand-secondary-background;
     border: $border-width solid $brand-secondary;
@@ -92,7 +92,7 @@
         font-size: rem-calc(44);
 
         &::after {
-          right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
+          right: calc(#{$icon-size-with-padding + $polygon-size + $heading-icon-size} / 2);
         }
 
         &::before {
@@ -106,7 +106,7 @@
       span {
         display: block;
         font-size: 0.75em;
-        margin-top: $line-height / 2;
+        margin-top: calc(#{$line-height} / 2);
       }
     }
 
@@ -195,7 +195,7 @@
     color: $admin-text;
     font-size: $small-font-size;
     font-weight: bold;
-    padding-right: $line-height / 2;
+    padding-right: calc(#{$line-height} / 2);
     text-transform: uppercase;
   }
 }
diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss
index 93df188bc..65bba3a88 100644
--- a/app/assets/stylesheets/mixins/layouts.scss
+++ b/app/assets/stylesheets/mixins/layouts.scss
@@ -33,7 +33,7 @@
 }
 
 @mixin full-width-cover($adjust-margin: true, $adjust-padding: false) {
-  $global-padding: rem-calc(map-get($grid-column-gutter, medium)) / 2;
+  $global-padding: rem-calc(map-get($grid-column-gutter, medium)) * 0.5;
   bottom: 0;
   content: "";
   display: block;
@@ -44,7 +44,7 @@
   top: 0;
 
   @if $adjust-padding {
-    $small-padding: rem-calc(map-get($grid-column-gutter, small)) / 2;
+    $small-padding: rem-calc(map-get($grid-column-gutter, small)) * 0.5;
 
     left: -$small-padding;
     right: -$small-padding;
diff --git a/app/assets/stylesheets/mixins/sdg.scss b/app/assets/stylesheets/mixins/sdg.scss
index 76442f551..a3655cf9a 100644
--- a/app/assets/stylesheets/mixins/sdg.scss
+++ b/app/assets/stylesheets/mixins/sdg.scss
@@ -1,11 +1,11 @@
 @mixin sdg-goal-list($spacing: 1ch) {
-  $min-spacing: $sdg-icon-min-width / 10;
+  $min-spacing: $sdg-icon-min-width * 0.1;
   $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
 
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin: -$spacing 0 $line-height / 3 -#{$spacing};
+  margin: -$spacing 0 calc(#{$line-height} / 3) -#{$spacing};
   margin-left: calc(-1 * #{$max-spacing});
   margin-top: calc(-1 * #{$max-spacing});
   width: calc(100% + #{$spacing});
diff --git a/app/assets/stylesheets/mixins/tags.scss b/app/assets/stylesheets/mixins/tags.scss
index 47de272a2..e16038413 100644
--- a/app/assets/stylesheets/mixins/tags.scss
+++ b/app/assets/stylesheets/mixins/tags.scss
@@ -19,8 +19,8 @@
   color: color-pick-contrast(#ececec);
   display: inline-block;
   font-size: $small-font-size;
-  margin-bottom: $line-height / 3;
-  padding: $line-height / 4 $line-height / 3;
+  margin-bottom: calc(#{$line-height} / 3);
+  padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
   text-decoration: none;
 
   &:hover {
diff --git a/app/assets/stylesheets/mixins/tooltips.scss b/app/assets/stylesheets/mixins/tooltips.scss
index 50cf9674a..8c2d118a8 100644
--- a/app/assets/stylesheets/mixins/tooltips.scss
+++ b/app/assets/stylesheets/mixins/tooltips.scss
@@ -1,7 +1,7 @@
 @mixin bottom-tooltip {
   @include tooltip;
   line-height: $global-lineheight;
-  margin-top: $line-height / 8;
+  margin-top: calc(#{$line-height} / 8);
   width: max-content;
 
   &::before {
diff --git a/app/assets/stylesheets/mixins/uploads.scss b/app/assets/stylesheets/mixins/uploads.scss
index fa5fdbf70..7374f1266 100644
--- a/app/assets/stylesheets/mixins/uploads.scss
+++ b/app/assets/stylesheets/mixins/uploads.scss
@@ -72,7 +72,7 @@
 
     &.errors {
       background-color: $alert-color;
-      margin-top: $line-height / 2;
+      margin-top: calc(#{$line-height} / 2);
     }
   }
 
diff --git a/app/assets/stylesheets/notification_item.scss b/app/assets/stylesheets/notification_item.scss
index d4bbc5aab..c0a5b44e2 100644
--- a/app/assets/stylesheets/notification_item.scss
+++ b/app/assets/stylesheets/notification_item.scss
@@ -20,7 +20,7 @@
       font-size: $circle-icon-size;
       position: absolute;
       left: $notification-icon-size - rem-calc(5);
-      top: $menu-link-top-padding - $circle-icon-size / 2;
+      top: calc(#{$menu-link-top-padding} - #{$circle-icon-size} / 2);
 
       @include breakpoint(medium) {
         $menu-link-left-padding: rem-calc(16);
diff --git a/app/assets/stylesheets/pages.scss b/app/assets/stylesheets/pages.scss
index 27a09576b..abb89005d 100644
--- a/app/assets/stylesheets/pages.scss
+++ b/app/assets/stylesheets/pages.scss
@@ -46,7 +46,7 @@
 
     @include breakpoint(medium) {
       display: inline-block;
-      margin-right: $line-height / 2;
+      margin-right: calc(#{$line-height} / 2);
     }
   }
 }
@@ -111,7 +111,7 @@
   .sidebar-card {
     border: 1px solid $border;
     margin-bottom: $line-height;
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
 
     &.light {
       background: #ecf0f1;
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 73fa7e58d..364bac7cc 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -30,7 +30,7 @@
       border-bottom-right-radius: rem-calc(3);
       border-top-right-radius: rem-calc(3);
       display: block;
-      height: $line-height / 2;
+      height: calc(#{$line-height} / 2);
     }
   }
 
@@ -100,7 +100,7 @@
   color: $color-warning;
   display: none;
   line-height: $line-height;
-  padding: $line-height / 2;
+  padding: calc(#{$line-height} / 2);
   text-align: center;
   width: 100%;
 
@@ -132,7 +132,7 @@
 
   li {
     @include has-fa-icon(check, solid);
-    margin: $line-height / 2 0;
+    margin: calc(#{$line-height} / 2) 0;
 
     &::before {
       margin-right: $font-icon-margin * 1.5;
@@ -192,7 +192,7 @@
     clear: both;
     color: $text-medium;
     font-size: $small-font-size;
-    margin-bottom: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
     position: relative;
 
     span:not(.label) {
@@ -278,8 +278,8 @@
     background: $highlight-soft;
     border: 1px solid $highlight;
     display: block;
-    margin: $line-height / 2 0;
-    padding: $line-height / 2;
+    margin: calc(#{$line-height} / 2) 0;
+    padding: calc(#{$line-height} / 2);
     position: relative;
 
     a {
@@ -337,7 +337,7 @@
 .budget-investment-show {
 
   .supports {
-    padding: $line-height / 2 0 0;
+    padding: calc(#{$line-height} / 2) 0 0;
   }
 
   .share-supported {
@@ -369,7 +369,7 @@
     @include full-width-background;
     background: $highlight;
     margin-bottom: $line-height;
-    padding-top: $line-height / 4;
+    padding-top: calc(#{$line-height} / 4);
   }
 }
 
@@ -378,7 +378,7 @@
   @include breakpoint(medium down) {
     background: $body-background;
     margin-bottom: rem-calc(-1) !important;
-    padding-top: $line-height / 2;
+    padding-top: calc(#{$line-height} / 2);
   }
 }
 
@@ -415,7 +415,7 @@
     .panel {
 
       &.with-image {
-        padding: 0 $line-height / 2 0 0;
+        padding: 0 calc(#{$line-height} / 2) 0 0;
       }
     }
 
@@ -428,7 +428,7 @@
     }
 
     .column:last-child:not(:first-child) {
-      padding-top: $line-height / 2;
+      padding-top: calc(#{$line-height} / 2);
     }
 
     img {
@@ -460,7 +460,7 @@
 
   h3 {
     font-weight: bold;
-    margin-top: $line-height / 2;
+    margin-top: calc(#{$line-height} / 2);
 
     a {
       color: inherit;
@@ -489,7 +489,7 @@
 .budget-investment-show,
 .legislation,
 .communities-show {
-  margin: $line-height / 4 0;
+  margin: calc(#{$line-height} / 4) 0;
 
   .panel {
     @extend %panel;
@@ -601,7 +601,7 @@
   .votes {
     border-top: 1px solid $border;
     margin-top: $line-height;
-    padding: $line-height / 2 0;
+    padding: calc(#{$line-height} / 2) 0;
     position: relative;
 
     @include breakpoint(medium) {
@@ -634,7 +634,7 @@
 .proposal-show .votes,
 .debate-show .votes {
   border: 0;
-  padding: $line-height / 2 0;
+  padding: calc(#{$line-height} / 2) 0;
 }
 
 .proposal,
@@ -754,7 +754,7 @@
   background: #fafafa;
   margin-top: -$line-height;
   margin-bottom: $line-height;
-  padding-bottom: $line-height / 2;
+  padding-bottom: calc(#{$line-height} / 2);
   padding-top: $line-height;
 
   h1 {
@@ -769,7 +769,7 @@
     margin-bottom: 0;
 
     li {
-      padding: $line-height / 4 0;
+      padding: calc(#{$line-height} / 4) 0;
       padding-left: $line-height;
     }
   }
@@ -782,7 +782,7 @@
     background: #eee;
     height: rem-calc(36);
     margin-bottom: 0;
-    padding: $line-height / 4;
+    padding: calc(#{$line-height} / 4);
     width: rem-calc(36);
 
     &::before {
@@ -860,7 +860,7 @@
     }
 
     .panel h3 {
-      margin: 0 0 $line-height / 2;
+      margin: 0 0 calc(#{$line-height} / 2);
 
       @include breakpoint(medium) {
         margin: 0;
@@ -875,7 +875,7 @@
 .featured-debates,
 .featured-proposals,
 .enquiries-list {
-  padding: $line-height / 2 0;
+  padding: calc(#{$line-height} / 2) 0;
 
   @include breakpoint(medium) {
     margin-left: 0 !important;
@@ -1011,7 +1011,7 @@
       border-bottom: 2px solid #fff;
       content: "";
       margin: 0 auto;
-      padding-top: $line-height / 2;
+      padding-top: calc(#{$line-height} / 2);
       display: block;
       width: 20%;
     }
@@ -1053,7 +1053,7 @@
       min-width: rem-calc(240);
 
       &::after {
-        margin-left: $line-height / 4;
+        margin-left: calc(#{$line-height} / 4);
       }
     }
   }
@@ -1133,7 +1133,7 @@
   .amount-available {
     display: block;
     font-size: $small-font-size;
-    margin-top: $line-height / 8;
+    margin-top: calc(#{$line-height} / 8);
     position: relative;
     text-align: right;
     white-space: nowrap;
@@ -1146,7 +1146,7 @@
       line-height: 0;
       position: absolute;
       right: -0.5em;
-      top: -$line-height / 8;
+      top: calc(#{-$line-height} / 8);
     }
 
     span {
@@ -1182,19 +1182,19 @@
   .ballot-content {
     border: 2px solid #f9f9f9;
     border-radius: rem-calc(6);
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
   }
 
   .subtitle {
     @include brand-border(left, 2px);
-    margin: $line-height / 2 0;
-    padding-left: $line-height / 2;
+    margin: calc(#{$line-height} / 2) 0;
+    padding-left: calc(#{$line-height} / 2);
   }
 
   .amount-spent {
     background: $success-bg;
     font-weight: normal;
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
 
     span {
       font-size: rem-calc(24);
@@ -1210,8 +1210,8 @@
 
 .select-district a {
   display: inline-block;
-  margin: $line-height / 4 0;
-  padding: $line-height / 4;
+  margin: calc(#{$line-height} / 4) 0;
+  padding: calc(#{$line-height} / 4);
 }
 
 .select-district .is-active a {
@@ -1219,7 +1219,7 @@
   border-radius: rem-calc(3);
   color: $budget;
   font-weight: bold;
-  padding: $line-height / 4;
+  padding: calc(#{$line-height} / 4);
 
   &::after {
     content: "\56";
@@ -1249,7 +1249,7 @@
       height: auto;
       left: 0;
       padding: $line-height;
-      padding-bottom: $line-height / 2;
+      padding-bottom: calc(#{$line-height} / 2);
       position: fixed;
       top: 0;
       width: 100%;
@@ -1321,7 +1321,7 @@
   }
 
   .budget-execution-info {
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
   }
 
   .author {
@@ -1460,8 +1460,8 @@
 
 .orbit-bullets button {
   background-color: #ccc;
-  height: $line-height / 2;
-  width: $line-height / 2;
+  height: calc(#{$line-height} / 2);
+  width: calc(#{$line-height} / 2);
 
   &.is-active {
     @include brand-background;
@@ -1520,7 +1520,7 @@
   &.with-image {
 
     @include breakpoint(medium) {
-      padding: 0 $line-height / 2 0 0;
+      padding: 0 calc(#{$line-height} / 2) 0 0;
     }
 
     .image-container img {
@@ -1534,8 +1534,8 @@
 .poll,
 .poll-question {
   border: 1px solid $border;
-  margin-bottom: $line-height / 2;
-  padding: $line-height / 2;
+  margin-bottom: calc(#{$line-height} / 2);
+  padding: calc(#{$line-height} / 2);
   position: relative;
 
   .icon-poll-answer {
@@ -1607,7 +1607,7 @@
   .dates {
     color: $text-medium;
     font-size: $small-font-size;
-    margin-bottom: $line-height / 2;
+    margin-bottom: calc(#{$line-height} / 2);
   }
 
   h4 {
@@ -1643,7 +1643,7 @@
 }
 
 .poll-question-answers {
-  @include flex-with-gap($line-height / 4);
+  @include flex-with-gap($line-height * 0.25);
   flex-wrap: wrap;
 
   .button {
@@ -1666,7 +1666,7 @@
         color: #fff;
         font-family: "icons" !important;
         font-size: rem-calc(12);
-        padding: $line-height / 4;
+        padding: calc(#{$line-height} / 4);
         position: absolute;
         right: -6px;
         top: -6px;
@@ -1684,7 +1684,7 @@
     table-layout: fixed;
 
     caption {
-      padding: $line-height / 2 0;
+      padding: calc(#{$line-height} / 2) 0;
       text-align: left;
     }
 
diff --git a/app/assets/stylesheets/relationable/related_content_list.scss b/app/assets/stylesheets/relationable/related_content_list.scss
index 0df728dc8..37a6b0697 100644
--- a/app/assets/stylesheets/relationable/related_content_list.scss
+++ b/app/assets/stylesheets/relationable/related_content_list.scss
@@ -5,7 +5,7 @@
   li {
     border-bottom: 1px solid $border;
     margin-bottom: 0 !important;
-    padding: $line-height / 2;
+    padding: calc(#{$line-height} / 2);
 
     @include breakpoint(medium) {
       display: flex;
@@ -34,6 +34,6 @@
   }
 
   .flag {
-    margin-top: $line-height / 2;
+    margin-top: calc(#{$line-height} / 2);
   }
 }
diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss
index d166e610a..7c9031fdd 100644
--- a/app/assets/stylesheets/sdg/goals/index.scss
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -33,8 +33,8 @@
 
     li {
       line-height: 0;
-      margin-left: $spacing / 2;
-      margin-right: $spacing / 2;
+      margin-left: calc(#{$spacing} / 2);
+      margin-right: calc(#{$spacing} / 2);
       width: calc(100% / 6 - #{$spacing});
 
       .sdg-goal-icon {
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index 610c25a31..157842e22 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -6,7 +6,7 @@
       align-items: center;
       color: $sdg-text;
       display: flex;
-      margin: $line-height / 2 0;
+      margin: calc(#{$line-height} / 2) 0;
       text-shadow: 0 0 1px $black;
       min-width: fit-content;
 
diff --git a/app/assets/stylesheets/sdg/goals/targets.scss b/app/assets/stylesheets/sdg/goals/targets.scss
index ec9fb307c..a7fde8d0a 100644
--- a/app/assets/stylesheets/sdg/goals/targets.scss
+++ b/app/assets/stylesheets/sdg/goals/targets.scss
@@ -12,7 +12,7 @@
     }
 
     &:not(:last-child)::after {
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
     }
   }
 }
diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss
index 5a959e576..6cd2ecb98 100644
--- a/app/assets/stylesheets/sdg/related_list_selector.scss
+++ b/app/assets/stylesheets/sdg/related_list_selector.scss
@@ -50,7 +50,7 @@
   }
 
   .input-section {
-    margin-bottom: 2 * $line-height / 3;
+    margin-bottom: calc(#{2 * $line-height} / 3);
   }
 
   .amsify-suggestags-area {
@@ -66,7 +66,7 @@
     flex-wrap: wrap;
 
     > input {
-      margin-bottom: $line-height / 4 !important;
+      margin-bottom: calc(#{$line-height} / 4) !important;
       order: -1;
     }
   }
diff --git a/app/assets/stylesheets/stats.scss b/app/assets/stylesheets/stats.scss
index a4ad681a1..7da97608a 100644
--- a/app/assets/stylesheets/stats.scss
+++ b/app/assets/stylesheets/stats.scss
@@ -16,7 +16,7 @@
     }
 
     ul {
-      margin-left: $line-height / 2;
+      margin-left: calc(#{$line-height} / 2);
       margin-top: 0;
       padding: 0;
     }
@@ -37,7 +37,7 @@
 
     &::before {
       display: inline-block;
-      margin-right: $line-height / 2;
+      margin-right: calc(#{$line-height} / 2);
       vertical-align: top;
     }
 
@@ -99,7 +99,7 @@
   .progress {
     background: #ebf0f4;
     border-radius: rem-calc(20);
-    height: $line-height / 2;
+    height: calc(#{$line-height} / 2);
   }
 
   .progress-meter {
diff --git a/app/assets/stylesheets/subscriptions.scss b/app/assets/stylesheets/subscriptions.scss
index 6affddaaf..0c0f8d96f 100644
--- a/app/assets/stylesheets/subscriptions.scss
+++ b/app/assets/stylesheets/subscriptions.scss
@@ -1,5 +1,5 @@
 .subscriptions-edit {
   form {
-    max-width: $global-width * 7 / 12;
+    max-width: calc(#{$global-width * 7} / 12);
   }
 }
diff --git a/app/assets/stylesheets/widgets/feeds/feed.scss b/app/assets/stylesheets/widgets/feeds/feed.scss
index a6004d309..e9e5be9a8 100644
--- a/app/assets/stylesheets/widgets/feeds/feed.scss
+++ b/app/assets/stylesheets/widgets/feeds/feed.scss
@@ -14,7 +14,7 @@
     .proposal {
       margin-bottom: 0;
       margin-top: 0;
-      padding: $line-height / 2 0;
+      padding: calc(#{$line-height} / 2) 0;
     }
   }
 
diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss
index 76cdb67b2..eb9fa75e7 100644
--- a/app/assets/stylesheets/widgets/feeds/participation.scss
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -24,6 +24,6 @@
   }
 
   .sdg-tag-list {
-    margin-top: $line-height / 2;
+    margin-top: calc(#{$line-height} / 2);
   }
 }
diff --git a/config/application.rb b/config/application.rb
index b950ab321..a2cf9bfde 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -1,3 +1,4 @@
+require "sassc-embedded"
 require_relative "boot"
 
 require "rails"
diff --git a/config/initializers/sass.rb b/config/initializers/sass.rb
new file mode 100644
index 000000000..7ab724bf5
--- /dev/null
+++ b/config/initializers/sass.rb
@@ -0,0 +1,8 @@
+# TODO: remove once we upgrade Foundation and Font Awesome
+SassC::Engine.class_eval do
+  alias_method :original_initialize, :initialize
+
+  def initialize(template, options = {})
+    original_initialize(template, options.merge(quiet_deps: true))
+  end
+end