diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index 47cacf569..c5ba33f96 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -66,6 +66,7 @@ rules:
   scss/at-mixin-pattern: "^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$"
   scss/dollar-variable-colon-space-before: never
   scss/dollar-variable-pattern: "^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$"
+  scss/function-calculation-no-interpolation: true
   scss/load-no-partial-leading-underscore: true
   scss/load-partial-extension: never
   scss/no-unused-private-members: true
diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index bfd791968..912bdb458 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -57,7 +57,7 @@ $switch-background: $dark-gray !default;
 // 2. CONSUL DEMOCRACY variables
 // -----------------------------
 
-$body-margin: calc(50vw - #{$global-width * 0.5}) !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;
diff --git a/app/assets/stylesheets/account/permissions_list.scss b/app/assets/stylesheets/account/permissions_list.scss
index 6abe2165c..17cb5e649 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: calc(#{$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 dee8d3ee4..f839845a5 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: calc(#{$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 34fa86d32..18cefcfb6 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -119,7 +119,7 @@ $table-header:   #ecf1f6;
     th {
       background: $table-header;
       color: $admin-text;
-      padding: calc(#{$line-height} / 2);
+      padding: calc($line-height / 2);
 
       a {
         color: inherit;
@@ -144,7 +144,7 @@ $table-header:   #ecf1f6;
     }
 
     [type="submit"] ~ a {
-      margin-left: calc(#{$line-height} / 2);
+      margin-left: calc($line-height / 2);
     }
 
     [type="checkbox"] {
@@ -192,11 +192,11 @@ $table-header:   #ecf1f6;
 
   .menu.simple,
   .order-links {
-    margin-bottom: calc(#{$line-height} / 2);
+    margin-bottom: calc($line-height / 2);
 
     h2 {
       font-weight: bold;
-      margin-bottom: calc(#{$line-height} / 3);
+      margin-bottom: calc($line-height / 3);
     }
 
     .is-active {
@@ -333,7 +333,7 @@ code {
   font-size: rem-calc(16);
   font-weight: normal;
   margin-bottom: $line-height;
-  padding: calc(#{$line-height} / 2);
+  padding: calc($line-height / 2);
 
   strong {
     font-size: rem-calc(18);
@@ -346,7 +346,7 @@ code {
   border-bottom-right-radius: rem-calc(6);
   border-top: 2px solid;
   font-size: $small-font-size;
-  padding: calc(#{$line-height} / 2);
+  padding: calc($line-height / 2);
 }
 
 .admin-budget-investment-info {
@@ -354,7 +354,7 @@ code {
   border: 2px solid $highlight;
   border-radius: rem-calc(4);
   margin-bottom: $line-height;
-  padding: calc(#{$line-height} / 2);
+  padding: calc($line-height / 2);
 
   p {
     font-size: $small-font-size;
@@ -436,7 +436,7 @@ table {
     height: $line-height * 2;
     line-height: $line-height * 2;
     margin: 0;
-    padding: 0 calc(#{$line-height} / 2);
+    padding: 0 calc($line-height / 2);
   }
 }
 
diff --git a/app/assets/stylesheets/admin/budget_investments/search_form.scss b/app/assets/stylesheets/admin/budget_investments/search_form.scss
index 1849f7f2e..8e138b648 100644
--- a/app/assets/stylesheets/admin/budget_investments/search_form.scss
+++ b/app/assets/stylesheets/admin/budget_investments/search_form.scss
@@ -5,7 +5,7 @@
     margin: $line-height 0;
 
     @include breakpoint(medium) {
-      margin: calc(#{$line-height} / 2) 0 0;
+      margin: calc($line-height / 2) 0 0;
     }
   }
 
@@ -13,11 +13,11 @@
     background: $highlight;
     clear: both;
     margin: $line-height 0;
-    padding: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
 
     .filter {
       display: inline-block;
-      margin: 0 calc(#{$line-height} / 2);
+      margin: 0 calc($line-height / 2);
 
       label {
         font-weight: normal;
@@ -26,7 +26,7 @@
     }
 
     .button {
-      margin-top: calc(#{$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 61fd9894e..cc0bdf2bf 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: calc(#{$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 5d2527b29..c355b52ce 100644
--- a/app/assets/stylesheets/admin/budgets/actions.scss
+++ b/app/assets/stylesheets/admin/budgets/actions.scss
@@ -22,7 +22,7 @@
     dd {
       flex-basis: 20em;
       flex-grow: 1;
-      max-width: calc(#{$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 447357ea2..1817b31ca 100644
--- a/app/assets/stylesheets/admin/budgets/drafting.scss
+++ b/app/assets/stylesheets/admin/budgets/drafting.scss
@@ -11,7 +11,7 @@
   }
 
   .callout {
-    flex-basis: calc(#{$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 107c789db..84d5dee2a 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: calc(#{$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 86d9c2368..52f2d14fd 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: calc(#{$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 0a9fc5951..dc842b8ed 100644
--- a/app/assets/stylesheets/admin/budgets/help.scss
+++ b/app/assets/stylesheets/admin/budgets/help.scss
@@ -11,7 +11,7 @@
   color: $admin-text;
   margin-bottom: $line-height;
   padding: $padding;
-  padding-right: calc(2 * #{$padding} + #{$quote-width});
+  padding-right: calc(2 * $padding + $quote-width);
   position: relative;
 
   @include breakpoint(medium) {
@@ -34,9 +34,9 @@
   }
 
   &::after {
-    bottom: calc(#{$padding} / 2);
+    bottom: calc($padding / 2);
     color: $white;
     position: absolute;
-    right: calc(#{$padding} + #{$quote-padding});
+    right: calc($padding + $quote-padding);
   }
 }
diff --git a/app/assets/stylesheets/admin/budgets/show.scss b/app/assets/stylesheets/admin/budgets/show.scss
index ce6ffd8c3..843b998a5 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: calc(#{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 a17635bfc..d2b485032 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: calc(#{$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: calc(#{$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 ffc6df094..a1b6b8a17 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: calc(#{$line-height} / 3);
+        margin-bottom: calc($line-height / 3);
       }
     }
 
diff --git a/app/assets/stylesheets/admin/locales/form.scss b/app/assets/stylesheets/admin/locales/form.scss
index e203596fb..ec965cfd2 100644
--- a/app/assets/stylesheets/admin/locales/form.scss
+++ b/app/assets/stylesheets/admin/locales/form.scss
@@ -19,7 +19,7 @@
   > [type="hidden"] + fieldset,
   > fieldset + fieldset {
     @include admin-fieldset-separator;
-    padding-top: calc(#{$line-height} / 4);
+    padding-top: calc($line-height / 4);
   }
 
   .collection-radio-buttons,
@@ -30,7 +30,7 @@
 
     @each $elements in 10, 15, 20, 25, 30 {
       &:has(label:nth-of-type(#{$elements})) {
-        column-count: calc(#{$elements} / 5);
+        column-count: calc($elements / 5);
       }
     }
   }
diff --git a/app/assets/stylesheets/admin/machine_learning/scripts.scss b/app/assets/stylesheets/admin/machine_learning/scripts.scss
index 5fc3e15d2..f9383b9bb 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: calc(#{$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 ce2c0f41c..0ad34fca3 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -122,8 +122,8 @@
   li {
     ul {
       border-left: 1px solid $sidebar-hover;
-      margin-left: calc(#{$line-height * 2} / 3);
-      padding-left: calc(#{$line-height} / 2);
+      margin-left: calc($line-height * 2 / 3);
+      padding-left: calc($line-height / 2);
     }
 
     &.is-active a,
@@ -137,7 +137,7 @@
   li > :first-child {
     color: inherit;
     display: block;
-    padding: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
     vertical-align: top;
 
     &:hover {
@@ -172,11 +172,11 @@
     margin-left: $line-height;
 
     li:first-child {
-      padding-top: calc(#{$line-height} / 2);
+      padding-top: calc($line-height / 2);
     }
 
     li:last-child {
-      padding-bottom: calc(#{$line-height} / 2);
+      padding-bottom: calc($line-height / 2);
     }
 
     a {
diff --git a/app/assets/stylesheets/admin/site_customization/images/table_actions.scss b/app/assets/stylesheets/admin/site_customization/images/table_actions.scss
index adecdc7b7..0dcd385ec 100644
--- a/app/assets/stylesheets/admin/site_customization/images/table_actions.scss
+++ b/app/assets/stylesheets/admin/site_customization/images/table_actions.scss
@@ -3,7 +3,7 @@
   container-type: inline-size;
   display: flex;
   flex-wrap: wrap;
-  gap: calc(#{$line-height} / 2);
+  gap: calc($line-height / 2);
 
   > :first-child {
     align-items: flex-start;
diff --git a/app/assets/stylesheets/admin/tenants/form.scss b/app/assets/stylesheets/admin/tenants/form.scss
index 99a27e5da..eed01d51f 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: calc(#{$line-height} / 3);
+    margin-bottom: calc($line-height / 3);
 
     &:last-of-type {
-      margin-bottom: calc(#{$line-height * 2} / 3);
+      margin-bottom: calc($line-height * 2 / 3);
     }
 
     input {
diff --git a/app/assets/stylesheets/autocomplete_overrides.scss b/app/assets/stylesheets/autocomplete_overrides.scss
index 5e0c8d63d..cc6442a31 100644
--- a/app/assets/stylesheets/autocomplete_overrides.scss
+++ b/app/assets/stylesheets/autocomplete_overrides.scss
@@ -16,12 +16,12 @@
   display: block;
   font-size: $small-font-size;
   list-style: none;
-  padding: calc(#{$line-height} / 4) calc(#{$line-height} / 3);
+  padding: calc($line-height / 4) calc($line-height / 3);
 
   .ui-menu-item {
 
     .ui-menu-item-wrapper {
-      padding: calc(#{$line-height} / 4) calc(#{$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 ea9d598b6..8333d1aa7 100644
--- a/app/assets/stylesheets/budgets/ballot/investment.scss
+++ b/app/assets/stylesheets/budgets/ballot/investment.scss
@@ -6,7 +6,7 @@
   background: #f1f1f1;
   border-radius: rem-calc(12);
   line-height: $line-height;
-  margin-bottom: calc(#{$line-height} / 4);
+  margin-bottom: calc($line-height / 4);
   padding: $line-height $side-padding;
   position: relative;
 
@@ -16,14 +16,14 @@
 
   .ballot-list-title {
     display: block;
-    padding-right: calc(#{$close-icon-size} + #{$close-icon-margin} - #{$side-padding});
+    padding-right: calc($close-icon-size + $close-icon-margin - $side-padding);
   }
 
   .ballot-list-price {
     @include brand-color;
     display: block;
     font-weight: bold;
-    margin-top: calc(#{$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 1cef35df4..713267f42 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: calc(#{$line-height} / 2);
+  margin-bottom: calc($line-height / 2);
 
   @include breakpoint(medium) {
     @include flex-with-gap(1em);
diff --git a/app/assets/stylesheets/budgets/executions/heading.scss b/app/assets/stylesheets/budgets/executions/heading.scss
index 605f0debc..9ca6fb410 100644
--- a/app/assets/stylesheets/budgets/executions/heading.scss
+++ b/app/assets/stylesheets/budgets/executions/heading.scss
@@ -9,11 +9,11 @@
       margin-bottom: $line-height;
 
       @include breakpoint(medium) {
-        width: calc(100% / 2 - #{$spacing});
+        width: calc(100% / 2 - $spacing);
       }
 
       @include breakpoint(large) {
-        width: calc(100% / 3 - #{$spacing});
+        width: calc(100% / 3 - $spacing);
       }
     }
   }
diff --git a/app/assets/stylesheets/budgets/executions/investment.scss b/app/assets/stylesheets/budgets/executions/investment.scss
index bd8176af1..669f55fa5 100644
--- a/app/assets/stylesheets/budgets/executions/investment.scss
+++ b/app/assets/stylesheets/budgets/executions/investment.scss
@@ -31,7 +31,7 @@
   }
 
   .budget-execution-info {
-    padding: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
   }
 
   .author {
diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index 76c90cb2e..8f0f55916 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -13,17 +13,17 @@
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    margin-bottom: calc(#{$line-height} / 2);
-    margin-top: calc(#{$line-height} / 4);
-    padding: calc(#{$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) {
-      width: calc(100% / 3 - #{$spacing});
+      width: calc(100% / 3 - $spacing);
     }
 
     @include breakpoint(large) {
-      width: calc(100% / 6 - #{$spacing});
+      width: calc(100% / 6 - $spacing);
     }
 
     a {
@@ -38,7 +38,7 @@
     span {
       display: block;
       font-size: $small-font-size;
-      padding-top: calc(#{$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 8fc24d75b..c03921ebc 100644
--- a/app/assets/stylesheets/budgets/investments-list.scss
+++ b/app/assets/stylesheets/budgets/investments-list.scss
@@ -14,14 +14,14 @@
     border-radius: rem-calc(6);
     display: flex;
     flex-direction: column;
-    margin-bottom: calc(#{$line-height} / 2);
+    margin-bottom: calc($line-height / 2);
     padding: 0;
     position: relative;
     width: 100%;
 
     @include breakpoint(medium) {
       $gap: rem-calc(map-get($grid-margin-gutters, medium));
-      width: calc(33.33% - #{$gap});
+      width: calc(33.33% - $gap);
     }
 
     img {
diff --git a/app/assets/stylesheets/budgets/investments/filters.scss b/app/assets/stylesheets/budgets/investments/filters.scss
index e59aa3c8f..806b04c26 100644
--- a/app/assets/stylesheets/budgets/investments/filters.scss
+++ b/app/assets/stylesheets/budgets/investments/filters.scss
@@ -8,8 +8,8 @@
 
     a {
       display: inline-block;
-      padding-bottom: calc(#{$line-height} / 4);
-      padding-top: calc(#{$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 0d4ad8e0d..0a9de1f3f 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: calc(#{$line-height} / 2);
+      margin-bottom: calc($line-height / 2);
     }
   }
 
   .phase-title {
     @include tabs-title;
-    margin: calc(#{$line-height} / 6);
+    margin: calc($line-height / 6);
     margin-left: 0;
     position: relative;
     text-align: center;
@@ -36,19 +36,19 @@
       $triangle-width: 1em;
       $item-margin: rem-calc(3);
 
-      margin-left: calc(-1 * (#{$triangle-width} - #{$item-margin}));
+      margin-left: calc(-1 * ($triangle-width - $item-margin));
       margin-right: 0;
-      transform: translateX(calc(#{$triangle-width} - #{$item-margin}));
+      transform: translateX(calc($triangle-width - $item-margin));
 
       &,
       a {
-        clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, #{$triangle-width} 50%, 0 0);
+        clip-path: polygon(calc(100% - $triangle-width) 0, 100% 50%, calc(100% - $triangle-width) 100%, 0 100%, #{$triangle-width} 50%, 0 0);
       }
 
       &:first-child {
         &,
         a {
-          clip-path: polygon(calc(100% - #{$triangle-width}) 0, 100% 50%, calc(100% - #{$triangle-width}) 100%, 0 100%, 0 0);
+          clip-path: polygon(calc(100% - $triangle-width) 0, 100% 50%, calc(100% - $triangle-width) 100%, 0 100%, 0 0);
         }
 
         a {
@@ -99,7 +99,7 @@
 
     &.current-phase-tab a {
       @include brand-secondary-background;
-      padding-top: calc(#{$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: calc(#{$line-height} / 2);
+    margin-bottom: calc($line-height / 2);
     text-transform: uppercase;
   }
 
diff --git a/app/assets/stylesheets/budgets/subheader.scss b/app/assets/stylesheets/budgets/subheader.scss
index 87453242b..be40d9226 100644
--- a/app/assets/stylesheets/budgets/subheader.scss
+++ b/app/assets/stylesheets/budgets/subheader.scss
@@ -8,7 +8,7 @@
   }
 
   .button {
-    margin-top: calc(#{$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 60bfe0fb0..c206db5dc 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -25,7 +25,7 @@
 
   .label {
     display: inline-block;
-    margin-left: calc(#{$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: calc(#{$line-height} / 2);
+  padding: calc($line-height / 2);
   text-align: center;
 
   @include breakpoint(medium only) {
     .change-behaviour {
       float: left;
-      margin-top: calc(#{$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: calc(#{$line-height} / 2);
+    height: calc($line-height / 2);
   }
 
   .progress-meter {
@@ -109,7 +109,7 @@
 
   .action-content {
     display: inline-block;
-    margin-left: calc(#{$line-height} / 4);
+    margin-left: calc($line-height / 4);
     max-width: 90%;
     word-break: break-all;
 
@@ -118,7 +118,7 @@
     }
 
     .label {
-      margin-left: calc(#{$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: calc(#{$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: calc(#{$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: calc(#{$line-height} / 2) calc(#{$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: calc(#{$line-height} / 2);
+      margin-left: calc($line-height / 2);
     }
   }
 
@@ -455,7 +455,7 @@
 .community-poll {
   border-bottom: 1px solid $border;
   margin-bottom: $line-height;
-  padding-bottom: calc(#{$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 2b217757d..ce08d2bdc 100644
--- a/app/assets/stylesheets/documents/document.scss
+++ b/app/assets/stylesheets/documents/document.scss
@@ -1,6 +1,6 @@
 .document {
   + .document {
-    margin-top: calc(#{$line-height} / 3);
+    margin-top: calc($line-height / 3);
   }
 
   a {
diff --git a/app/assets/stylesheets/documents/documents.scss b/app/assets/stylesheets/documents/documents.scss
index 1d48cfc37..47a135aa3 100644
--- a/app/assets/stylesheets/documents/documents.scss
+++ b/app/assets/stylesheets/documents/documents.scss
@@ -10,7 +10,7 @@
   }
 
   ul li {
-    padding-top: calc(#{$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: calc(#{$line-height} / 2) 0;
-    padding: calc(#{$line-height} / 2);
+    margin: calc($line-height / 2) 0;
+    padding: calc($line-height / 2);
     position: relative;
 
     p {
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index cf54e3241..9eb9103d6 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -234,12 +234,12 @@ button,
 .menu.simple {
   border-bottom: 1px solid $border;
   clear: both;
-  margin-bottom: calc(#{$line-height} / 2);
+  margin-bottom: calc($line-height / 2);
 
   li {
     font-size: $base-font-size;
     margin-bottom: 0;
-    margin-right: calc(#{$line-height} / 2);
+    margin-right: calc($line-height / 2);
 
     @include breakpoint(medium) {
       margin-right: $line-height * 1.5;
@@ -264,7 +264,7 @@ button,
     }
 
     &:not(.is-active) {
-      margin-bottom: calc(#{$line-height} / 3);
+      margin-bottom: calc($line-height / 3);
     }
   }
 
@@ -322,7 +322,7 @@ button,
 }
 
 .close-button {
-  top: calc(#{$line-height} / 2);
+  top: calc($line-height / 2);
 }
 
 .back,
@@ -330,7 +330,7 @@ button,
   clear: both;
   color: $text-medium;
   display: inline-block;
-  padding-right: calc(#{$line-height} / 2);
+  padding-right: calc($line-height / 2);
 }
 
 .back:not([class^="icon-"]) {
@@ -386,7 +386,7 @@ button,
 }
 
 .button.float-right ~ .button.float-right {
-  margin: 0 calc(#{$line-height} / 2);
+  margin: 0 calc($line-height / 2);
 }
 
 .pagination .current {
@@ -670,13 +670,13 @@ body > header,
 .submenu {
   border-bottom: 1px solid $border;
   clear: both;
-  margin-bottom: calc(#{$line-height} / 2);
+  margin-bottom: calc($line-height / 2);
 
   a {
     @include text-colored-link;
     display: inline-block;
     font-weight: bold;
-    margin-right: calc(#{$line-height} / 2);
+    margin-right: calc($line-height / 2);
     position: relative;
     text-align: left;
 
@@ -764,7 +764,7 @@ footer {
 .subfooter {
   border-top: 1px solid $text-light;
   font-size: $small-font-size;
-  padding-top: calc(#{$line-height} / 2);
+  padding-top: calc($line-height / 2);
 
   .legal {
     display: inline-block;
@@ -815,8 +815,8 @@ footer {
   display: inline-block;
   font-size: rem-calc(16);
   font-weight: bold;
-  margin: -1px 0 calc(#{$line-height} / 2);
-  padding-top: calc(#{$line-height} / 4);
+  margin: -1px 0 calc($line-height / 2);
+  padding-top: calc($line-height / 4);
   text-transform: uppercase;
 }
 
@@ -877,9 +877,9 @@ footer {
     background: $body-background;
     box-decoration-break: clone;
     font-weight: bold;
-    padding: 0 calc(#{$line-height} / 2);
+    padding: 0 calc($line-height / 2);
     position: relative;
-    top: calc(#{-$line-height} / 2);
+    top: calc(-1 * $line-height / 2);
   }
 }
 
@@ -935,7 +935,7 @@ form {
   }
 
   [type=file] {
-    margin: calc(#{$line-height} / 2) 0 calc(#{$line-height} / 2) calc(#{$line-height} / 4);
+    margin: calc($line-height / 2) 0 calc($line-height / 2) calc($line-height / 4);
   }
 
   .cke {
@@ -1110,7 +1110,7 @@ form {
   background: $alert-bg;
   color: $color-alert;
   display: inline-block;
-  margin: 0 calc(#{$line-height} / 4);
+  margin: 0 calc($line-height / 4);
 
   a {
     color: $color-alert;
@@ -1132,7 +1132,7 @@ form {
 
   select {
     height: $line-height * 2;
-    margin-right: calc(#{$line-height} / 2);
+    margin-right: calc($line-height / 2);
   }
 
   .final-votes-info {
@@ -1140,10 +1140,10 @@ form {
     border: 1px solid $warning-border;
     color: $color-warning;
     margin-top: $line-height;
-    padding: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
 
     ul li {
-      margin: calc(#{$line-height} / 2) 0;
+      margin: calc($line-height / 2) 0;
     }
 
     .icon-box {
@@ -1190,9 +1190,9 @@ form {
 .notification {
   border: 1px solid $border;
   display: block;
-  margin-bottom: calc(#{$line-height} / 4);
+  margin-bottom: calc($line-height / 4);
   margin-left: $line-height;
-  padding: calc(#{$line-height} / 2) $line-height;
+  padding: calc($line-height / 2) $line-height;
   position: relative;
 
   @include breakpoint(medium) {
@@ -1354,7 +1354,7 @@ table {
 
     td {
       line-height: $line-height;
-      padding: calc(#{$line-height} / 2) calc(#{$line-height} / 4);
+      padding: calc($line-height / 2) calc($line-height / 4);
     }
 
     &:nth-child(odd) {
@@ -1445,7 +1445,7 @@ table {
 
   @include breakpoint(medium) {
     .left + .left {
-      margin-left: calc(#{$line-height} / 2);
+      margin-left: calc($line-height / 2);
     }
   }
 
@@ -1477,7 +1477,7 @@ table {
     background: #f6f6f6;
     font-weight: bold;
     line-height: rem-calc(20);
-    padding-top: calc(#{$line-height} / 4);
+    padding-top: calc($line-height / 4);
     text-transform: uppercase;
     vertical-align: top;
 
@@ -1509,7 +1509,7 @@ table {
 
   .button + form {
     display: inline-block;
-    margin-left: calc(#{$line-height} / 2);
+    margin-left: calc($line-height / 2);
   }
 
   .verification-list {
@@ -1558,7 +1558,7 @@ table {
       color: $color-info;
       font-size: rem-calc(24);
       margin-left: -27px;
-      padding: 0 calc(#{$line-height} / 2);
+      padding: 0 calc($line-height / 2);
       position: absolute;
       top: -12px;
     }
@@ -1589,7 +1589,7 @@ table {
 
   .comment {
     line-height: $list-lineheight;
-    margin: calc(#{$line-height} / 4) 0;
+    margin: calc($line-height / 4) 0;
     position: relative;
 
     p {
@@ -1609,7 +1609,7 @@ table {
 
   img,
   svg {
-    margin-#{$global-right}: calc(#{$line-height} / 2);
+    margin-#{$global-right}: calc($line-height / 2);
   }
 
   .reply {
@@ -1617,8 +1617,8 @@ table {
     border-left: 0;
     border-right: 0;
     font-size: $small-font-size;
-    margin: calc(#{$line-height} / 4) 0;
-    padding: calc(#{$line-height} / 4);
+    margin: calc($line-height / 4) 0;
+    padding: calc($line-height / 4);
     position: relative;
 
     &:empty {
@@ -1631,7 +1631,7 @@ table {
     }
 
     .comment-form form {
-      margin-top: calc(#{$line-height} / 2);
+      margin-top: calc($line-height / 2);
     }
   }
 
@@ -1684,9 +1684,9 @@ table {
   }
 
   .comment-user {
-    margin-top: calc(#{$line-height} / 4);
+    margin-top: calc($line-height / 4);
     overflow: hidden;
-    padding: calc(#{$line-height} / 4) 0;
+    padding: calc($line-height / 4) 0;
 
     &.level-1,
     &.level-2,
@@ -1697,7 +1697,7 @@ table {
     &.is-admin,
     &.is-moderator {
       background: rgba(70, 219, 145, 0.3);
-      padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
+      padding: calc($line-height / 4) calc($line-height / 2);
     }
 
     &.level-1 {
@@ -1717,7 +1717,7 @@ table {
 }
 
 .comment-list {
-  margin: calc(#{$line-height} / 4) 0;
+  margin: calc($line-height / 4) 0;
 
   .comment-list {
     border-left: 1px dashed $border;
@@ -1838,7 +1838,7 @@ table {
 .public-interests {
 
   li {
-    margin-right: calc(#{$line-height} / 4);
+    margin-right: calc($line-height / 4);
 
     span {
       background: none;
@@ -1851,10 +1851,10 @@ table {
 
   .follow-list {
     list-style-type: circle;
-    padding: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
 
     li {
-      margin-bottom: calc(#{$line-height} / 2);
+      margin-bottom: calc($line-height / 2);
       margin-left: $line-height;
     }
   }
@@ -1916,7 +1916,7 @@ table {
   }
 
   .card {
-    padding: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
 
     .card {
       border: 0;
@@ -2030,7 +2030,7 @@ table {
   background: #fafafa;
   margin-bottom: $line-height;
   margin-top: rem-calc(-25);
-  padding: $line-height 0 calc(#{$line-height} / 2);
+  padding: $line-height 0 calc($line-height / 2);
 
   @include breakpoint(medium) {
     padding-top: 0;
@@ -2058,8 +2058,8 @@ table {
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
-    margin-bottom: calc(#{$line-height} / 4);
-    padding: calc(#{$line-height} / 2);
+    margin-bottom: calc($line-height / 4);
+    padding: calc($line-height / 2);
     z-index: 1;
 
     &:hover:not(:focus-within) {
@@ -2091,8 +2091,8 @@ table {
   background: $highlight-soft;
   border: 1px solid $highlight;
   display: block;
-  margin: calc(#{$line-height} / 2) 0;
-  padding: calc(#{$line-height} / 2);
+  margin: calc($line-height / 2) 0;
+  padding: calc($line-height / 2);
   position: relative;
 
   a {
@@ -2187,8 +2187,8 @@ table {
 
     &::before {
       $button-padding-left: nth($button-padding, 2);
-      margin-left: calc(#{-$button-padding-left} / 2);
-      margin-right: calc(#{$button-padding-left} / 2);
+      margin-left: calc(-1 * $button-padding-left / 2);
+      margin-right: calc($button-padding-left / 2);
     }
   }
 }
@@ -2219,8 +2219,8 @@ table {
     margin-top: rem-calc(-48);
 
     @include breakpoint($global-width) {
-      margin-left: calc(#{$full-width-margin});
-      margin-right: calc(#{$full-width-margin});
+      margin-left: calc($full-width-margin);
+      margin-right: calc($full-width-margin);
     }
   }
 
@@ -2256,7 +2256,7 @@ table {
 
     p,
     .sdg-tag-list {
-      padding: 0 calc(#{$line-height} / 4);
+      padding: 0 calc($line-height / 4);
     }
   }
 
@@ -2273,7 +2273,7 @@ table {
       @include brand-border(top, 4px);
       display: inline-block;
       margin-bottom: 0;
-      padding: calc(#{$line-height} / 2) 0;
+      padding: calc($line-height / 2) 0;
     }
   }
 
@@ -2295,7 +2295,7 @@ table {
       border-bottom: 1px solid $border;
       display: block;
       font-size: $small-font-size;
-      margin: $line-height 0 calc(#{$line-height} / 2);
+      margin: $line-height 0 calc($line-height / 2);
       text-align: right;
       width: 100%;
     }
@@ -2338,7 +2338,7 @@ table {
     color: #fff;
     font-size: rem-calc(24);
     line-height: rem-calc(24);
-    padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
+    padding: calc($line-height / 4) calc($line-height / 2);
     position: absolute;
     text-transform: uppercase;
     width: 100%;
@@ -2363,7 +2363,7 @@ table {
       display: inline-block;
       font-size: $small-font-size;
       font-weight: bold;
-      margin-bottom: calc(#{$line-height} / 4);
+      margin-bottom: calc($line-height / 4);
       padding: rem-calc(4) rem-calc(8);
     }
   }
@@ -2378,7 +2378,7 @@ table {
   .date-of-birth {
     select {
       float: left;
-      margin-right: calc(#{$line-height} / 4);
+      margin-right: calc($line-height / 4);
       width: 30%;
     }
   }
diff --git a/app/assets/stylesheets/layout/account_menu.scss b/app/assets/stylesheets/layout/account_menu.scss
index 8e6e2ab6a..2d4f23d81 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: calc(#{$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 a67251901..904ea1bf9 100644
--- a/app/assets/stylesheets/layout/locale_switcher.scss
+++ b/app/assets/stylesheets/layout/locale_switcher.scss
@@ -1,6 +1,6 @@
 .locale {
-  margin-bottom: calc(#{$line-height} / 4);
-  margin-top: calc(#{$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: calc(#{$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 b7abf5bcf..896081710 100644
--- a/app/assets/stylesheets/layout/social.scss
+++ b/app/assets/stylesheets/layout/social.scss
@@ -16,7 +16,7 @@
 
   a {
     font-size: rem-calc(24);
-    margin: 0 calc(#{$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 8165bcf7b..709489367 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: calc(#{$line-height} / 2);
-    padding-top: calc(#{$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: calc(#{$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 1c0c6743a..bdab6ea02 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -70,7 +70,7 @@
       border-top-right-radius: rem-calc(6);
       display: inline-block;
       margin-bottom: 0;
-      margin-right: calc(#{$line-height} / 4);
+      margin-right: calc($line-height / 4);
       margin-top: 0;
 
       &:hover:not(.is-active) {
@@ -84,7 +84,7 @@
 
     a {
       display: block;
-      padding: calc(#{$line-height} / 4) calc(#{$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: calc(#{$line-height} / 2);
+      margin-bottom: calc($line-height / 2);
       margin-right: $line-height;
-      padding: calc(#{$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: calc(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);
       }
 
@@ -672,7 +672,7 @@
           border-bottom: 1px solid $border;
           font-size: $small-font-size;
           margin-bottom: rem-calc(16);
-          padding-bottom: calc(#{$line-height} / 2);
+          padding-bottom: calc($line-height / 2);
 
           .comment-text {
             margin-bottom: rem-calc(8);
@@ -941,7 +941,7 @@
         $margin: rem-calc(map-get($grid-column-gutter, "medium"));
 
         margin-right: $margin;
-        width: calc(75% - #{$margin});
+        width: calc(75% - $margin);
       }
     }
   }
@@ -955,17 +955,17 @@
     padding-top: rem-calc(16);
 
     &:not(:last-child) {
-      margin-bottom: calc(#{$line-height} / 2);
+      margin-bottom: calc($line-height / 2);
     }
   }
 
   .question-title:not(:only-child) {
-    margin-bottom: calc(#{$line-height} / 2);
+    margin-bottom: calc($line-height / 2);
   }
 
   .annotation-title {
-    margin-bottom: calc(#{$line-height} / 2);
-    margin-top: calc(#{$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: calc(#{$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/milestones.scss b/app/assets/stylesheets/milestones.scss
index 30011cd0f..8d16aa395 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: calc(#{$line-height} / 2);
+      margin-bottom: calc($line-height / 2);
     }
   }
 }
@@ -68,7 +68,7 @@ $progress-bar-color:      #fea230;
   }
 
   .milestone-content {
-    padding: calc(#{$line-height} / 6) calc(#{$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: calc(#{$line-height} / 6);
-  padding: calc(#{$line-height} / 4) calc(#{$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 3b04fc93c..df105c36d 100644
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/app/assets/stylesheets/mixins/forms.scss
@@ -5,8 +5,8 @@
   background-image: linear-gradient(
     to right,
     #{$color} 0,
-    #{$color} calc(100% - #{$final-color-width} - 1px),
-    #{$body-background} calc(100% - #{$final-color-width}),
+    #{$color} calc(100% - $final-color-width - 1px),
+    #{$body-background} calc(100% - $final-color-width),
     #{$body-background} 100%
   );
 }
@@ -52,14 +52,14 @@
         display: block;
         height: 100%;
         position: absolute;
-        right: calc(#{$icon-size-with-padding} - #{$rounding-error});
+        right: calc($icon-size-with-padding - $rounding-error);
         top: 0;
         width: $polygon-size;
       }
     }
 
     &::before {
-      height: calc(100% + #{$border-width * 2});
+      height: calc(100% + $border-width * 2);
       top: -$border-width;
     }
 
@@ -92,7 +92,7 @@
         font-size: rem-calc(44);
 
         &::after {
-          right: calc(#{$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: calc(#{$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: calc(#{$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 d33fc6e3d..27fa294f1 100644
--- a/app/assets/stylesheets/mixins/layouts.scss
+++ b/app/assets/stylesheets/mixins/layouts.scss
@@ -58,11 +58,11 @@
   @include breakpoint($global-width) {
 
     @if $adjust-padding and $adjust-margin {
-      left: calc(#{$full-width-margin} - #{$global-padding});
-      right: calc(#{$full-width-margin} - #{$global-padding});
+      left: calc($full-width-margin - $global-padding);
+      right: calc($full-width-margin - $global-padding);
     } @else if $adjust-margin {
-      left: calc(#{$full-width-margin});
-      right: calc(#{$full-width-margin});
+      left: calc($full-width-margin);
+      right: calc($full-width-margin);
     }
   }
 }
diff --git a/app/assets/stylesheets/mixins/sdg.scss b/app/assets/stylesheets/mixins/sdg.scss
index a3655cf9a..101a63951 100644
--- a/app/assets/stylesheets/mixins/sdg.scss
+++ b/app/assets/stylesheets/mixins/sdg.scss
@@ -5,11 +5,11 @@
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin: -$spacing 0 calc(#{$line-height} / 3) -#{$spacing};
-  margin-left: calc(-1 * #{$max-spacing});
-  margin-top: calc(-1 * #{$max-spacing});
-  width: calc(100% + #{$spacing});
-  width: calc(100% + #{$max-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);
+  width: calc(100% + $max-spacing);
 
   > *,
   > .tabs-title {
@@ -41,7 +41,7 @@
   label,
   li {
     min-width: $sdg-icon-min-width;
-    width: calc(100% / 17 - #{$spacing});
+    width: calc(100% / 17 - $spacing);
 
     &:hover {
       cursor: pointer;
diff --git a/app/assets/stylesheets/mixins/tags.scss b/app/assets/stylesheets/mixins/tags.scss
index e16038413..e732bd0d4 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: calc(#{$line-height} / 3);
-  padding: calc(#{$line-height} / 4) calc(#{$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 8c2d118a8..04283f104 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: calc(#{$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 b6f814214..c5b6848a4 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: calc(#{$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 74ea4cc1d..7f5c24938 100644
--- a/app/assets/stylesheets/notification_item.scss
+++ b/app/assets/stylesheets/notification_item.scss
@@ -20,7 +20,7 @@
       font-size: $circle-icon-size;
       left: $notification-icon-size - rem-calc(5);
       position: absolute;
-      top: calc(#{$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 abb89005d..eda7e565e 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: calc(#{$line-height} / 2);
+      margin-right: calc($line-height / 2);
     }
   }
 }
@@ -111,7 +111,7 @@
   .sidebar-card {
     border: 1px solid $border;
     margin-bottom: $line-height;
-    padding: calc(#{$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 2dd68776b..d4232ffbf 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -32,7 +32,7 @@
       border-bottom-right-radius: rem-calc(3);
       border-top-right-radius: rem-calc(3);
       display: block;
-      height: calc(#{$line-height} / 2);
+      height: calc($line-height / 2);
     }
   }
 
@@ -102,7 +102,7 @@
   color: $color-warning;
   display: none;
   line-height: $line-height;
-  padding: calc(#{$line-height} / 2);
+  padding: calc($line-height / 2);
   text-align: center;
   width: 100%;
 
@@ -134,7 +134,7 @@
 
   li {
     @include has-fa-icon(check, solid);
-    margin: calc(#{$line-height} / 2) 0;
+    margin: calc($line-height / 2) 0;
 
     &::before {
       margin-right: $font-icon-margin * 1.5;
@@ -194,7 +194,7 @@
     clear: both;
     color: $text-medium;
     font-size: $small-font-size;
-    margin-bottom: calc(#{$line-height} / 2);
+    margin-bottom: calc($line-height / 2);
     position: relative;
 
     span:not(.label) {
@@ -280,8 +280,8 @@
     background: $highlight-soft;
     border: 1px solid $highlight;
     display: block;
-    margin: calc(#{$line-height} / 2) 0;
-    padding: calc(#{$line-height} / 2);
+    margin: calc($line-height / 2) 0;
+    padding: calc($line-height / 2);
     position: relative;
 
     a {
@@ -339,7 +339,7 @@
 .budget-investment-show {
 
   .supports {
-    padding: calc(#{$line-height} / 2) 0 0;
+    padding: calc($line-height / 2) 0 0;
   }
 
   .share-supported {
@@ -371,7 +371,7 @@
     @include full-width-background;
     background: $highlight;
     margin-bottom: $line-height;
-    padding-top: calc(#{$line-height} / 4);
+    padding-top: calc($line-height / 4);
   }
 }
 
@@ -380,7 +380,7 @@
   @include breakpoint(medium down) {
     background: $body-background;
     margin-bottom: rem-calc(-1) !important;
-    padding-top: calc(#{$line-height} / 2);
+    padding-top: calc($line-height / 2);
   }
 }
 
@@ -417,7 +417,7 @@
     .panel {
 
       &.with-image {
-        padding: 0 calc(#{$line-height} / 2) 0 0;
+        padding: 0 calc($line-height / 2) 0 0;
       }
     }
 
@@ -430,7 +430,7 @@
     }
 
     .column:last-child:not(:first-child) {
-      padding-top: calc(#{$line-height} / 2);
+      padding-top: calc($line-height / 2);
     }
 
     img {
@@ -462,7 +462,7 @@
 
   h3 {
     font-weight: bold;
-    margin-top: calc(#{$line-height} / 2);
+    margin-top: calc($line-height / 2);
 
     a {
       color: inherit;
@@ -491,7 +491,7 @@
 .budget-investment-show,
 .legislation,
 .communities-show {
-  margin: calc(#{$line-height} / 4) 0;
+  margin: calc($line-height / 4) 0;
 
   .panel {
     @extend %panel;
@@ -603,7 +603,7 @@
   .votes {
     border-top: 1px solid $border;
     margin-top: $line-height;
-    padding: calc(#{$line-height} / 2) 0;
+    padding: calc($line-height / 2) 0;
     position: relative;
 
     @include breakpoint(medium) {
@@ -636,7 +636,7 @@
 .proposal-show .votes,
 .debate-show .votes {
   border: 0;
-  padding: calc(#{$line-height} / 2) 0;
+  padding: calc($line-height / 2) 0;
 }
 
 .proposal,
@@ -756,7 +756,7 @@
   background: #fafafa;
   margin-bottom: $line-height;
   margin-top: -$line-height;
-  padding-bottom: calc(#{$line-height} / 2);
+  padding-bottom: calc($line-height / 2);
   padding-top: $line-height;
 
   h1 {
@@ -771,7 +771,7 @@
     margin-bottom: 0;
 
     li {
-      padding: calc(#{$line-height} / 4) 0;
+      padding: calc($line-height / 4) 0;
       padding-left: $line-height;
     }
   }
@@ -784,7 +784,7 @@
     background: #eee;
     height: rem-calc(36);
     margin-bottom: 0;
-    padding: calc(#{$line-height} / 4);
+    padding: calc($line-height / 4);
     width: rem-calc(36);
 
     &::before {
@@ -862,7 +862,7 @@
     }
 
     .panel h3 {
-      margin: 0 0 calc(#{$line-height} / 2);
+      margin: 0 0 calc($line-height / 2);
 
       @include breakpoint(medium) {
         margin: 0;
@@ -877,7 +877,7 @@
 .featured-debates,
 .featured-proposals,
 .enquiries-list {
-  padding: calc(#{$line-height} / 2) 0;
+  padding: calc($line-height / 2) 0;
 
   @include breakpoint(medium) {
     margin-left: 0 !important;
@@ -1014,7 +1014,7 @@
       content: "";
       display: block;
       margin: 0 auto;
-      padding-top: calc(#{$line-height} / 2);
+      padding-top: calc($line-height / 2);
       width: 20%;
     }
   }
@@ -1055,7 +1055,7 @@
       min-width: rem-calc(240);
 
       &::after {
-        margin-left: calc(#{$line-height} / 4);
+        margin-left: calc($line-height / 4);
       }
     }
   }
@@ -1135,7 +1135,7 @@
   .amount-available {
     display: block;
     font-size: $small-font-size;
-    margin-top: calc(#{$line-height} / 8);
+    margin-top: calc($line-height / 8);
     position: relative;
     text-align: right;
     white-space: nowrap;
@@ -1148,7 +1148,7 @@
       line-height: 0;
       position: absolute;
       right: -0.5em;
-      top: calc(#{-$line-height} / 8);
+      top: calc(-1 * $line-height / 8);
     }
 
     span {
@@ -1184,19 +1184,19 @@
   .ballot-content {
     border: 2px solid #f9f9f9;
     border-radius: rem-calc(6);
-    padding: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
   }
 
   .subtitle {
     @include brand-border(left, 2px);
-    margin: calc(#{$line-height} / 2) 0;
-    padding-left: calc(#{$line-height} / 2);
+    margin: calc($line-height / 2) 0;
+    padding-left: calc($line-height / 2);
   }
 
   .amount-spent {
     background: $success-bg;
     font-weight: normal;
-    padding: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
 
     span {
       font-size: rem-calc(24);
@@ -1212,8 +1212,8 @@
 
 .select-district a {
   display: inline-block;
-  margin: calc(#{$line-height} / 4) 0;
-  padding: calc(#{$line-height} / 4);
+  margin: calc($line-height / 4) 0;
+  padding: calc($line-height / 4);
 }
 
 .select-district .is-active a {
@@ -1221,7 +1221,7 @@
   border-radius: rem-calc(3);
   color: $budget;
   font-weight: bold;
-  padding: calc(#{$line-height} / 4);
+  padding: calc($line-height / 4);
 
   &::after {
     content: "\56";
@@ -1251,7 +1251,7 @@
       height: auto;
       left: 0;
       padding: $line-height;
-      padding-bottom: calc(#{$line-height} / 2);
+      padding-bottom: calc($line-height / 2);
       position: fixed;
       top: 0;
       width: 100%;
@@ -1407,8 +1407,8 @@
 
 .orbit-bullets button {
   background-color: #ccc;
-  height: calc(#{$line-height} / 2);
-  width: calc(#{$line-height} / 2);
+  height: calc($line-height / 2);
+  width: calc($line-height / 2);
 
   &.is-active {
     @include brand-background;
@@ -1465,8 +1465,8 @@
 .public .poll,
 .poll-question {
   border: 1px solid $border;
-  margin-bottom: calc(#{$line-height} / 2);
-  padding: calc(#{$line-height} / 2);
+  margin-bottom: calc($line-height / 2);
+  padding: calc($line-height / 2);
   position: relative;
 }
 
@@ -1515,7 +1515,7 @@
         content: "\6c";
         font-family: "icons" !important;
         font-size: rem-calc(12);
-        padding: calc(#{$line-height} / 4);
+        padding: calc($line-height / 4);
         position: absolute;
         right: -6px;
         top: -6px;
@@ -1533,7 +1533,7 @@
     table-layout: fixed;
 
     caption {
-      padding: calc(#{$line-height} / 2) 0;
+      padding: calc($line-height / 2) 0;
       text-align: left;
     }
 
diff --git a/app/assets/stylesheets/polls/poll.scss b/app/assets/stylesheets/polls/poll.scss
index 4b77b5490..8e3446ef7 100644
--- a/app/assets/stylesheets/polls/poll.scss
+++ b/app/assets/stylesheets/polls/poll.scss
@@ -2,7 +2,7 @@
   &.with-image {
 
     @include breakpoint(medium) {
-      padding: 0 calc(#{$line-height} / 2) 0 0;
+      padding: 0 calc($line-height / 2) 0 0;
     }
 
     .image-container img {
@@ -71,7 +71,7 @@
   .dates {
     color: $text-medium;
     font-size: $small-font-size;
-    margin-bottom: calc(#{$line-height} / 2);
+    margin-bottom: calc($line-height / 2);
   }
 
   h4 {
diff --git a/app/assets/stylesheets/relationable/related_content_list.scss b/app/assets/stylesheets/relationable/related_content_list.scss
index 37a6b0697..935be3ec7 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: calc(#{$line-height} / 2);
+    padding: calc($line-height / 2);
 
     @include breakpoint(medium) {
       display: flex;
@@ -34,6 +34,6 @@
   }
 
   .flag {
-    margin-top: calc(#{$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 7c9031fdd..88d37294c 100644
--- a/app/assets/stylesheets/sdg/goals/index.scss
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -33,9 +33,9 @@
 
     li {
       line-height: 0;
-      margin-left: calc(#{$spacing} / 2);
-      margin-right: calc(#{$spacing} / 2);
-      width: calc(100% / 6 - #{$spacing});
+      margin-left: calc($spacing / 2);
+      margin-right: calc($spacing / 2);
+      width: calc(100% / 6 - $spacing);
 
       .sdg-goal-icon {
         width: 100%;
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index 86022f0ff..6c32ba51b 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: calc(#{$line-height} / 2) 0;
+      margin: calc($line-height / 2) 0;
       min-width: fit-content;
       text-shadow: 0 0 1px $black;
 
diff --git a/app/assets/stylesheets/sdg/goals/targets.scss b/app/assets/stylesheets/sdg/goals/targets.scss
index a7fde8d0a..0080d1138 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: calc(#{$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 fb95e36aa..fad65fc54 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: calc(#{2 * $line-height} / 3);
+    margin-bottom: calc(2 * $line-height / 3);
   }
 
   .amsify-suggestags-area {
@@ -66,7 +66,7 @@
     flex-wrap: wrap;
 
     > input {
-      margin-bottom: calc(#{$line-height} / 4) !important;
+      margin-bottom: calc($line-height / 4) !important;
       order: -1;
     }
   }
diff --git a/app/assets/stylesheets/shared/advanced_search.scss b/app/assets/stylesheets/shared/advanced_search.scss
index 5c2ec2c05..c701ea8fd 100644
--- a/app/assets/stylesheets/shared/advanced_search.scss
+++ b/app/assets/stylesheets/shared/advanced_search.scss
@@ -37,7 +37,7 @@
     @include breakpoint(medium) {
       align-self: flex-end;
       margin-bottom: 0;
-      margin-top: calc(#{$line-height} / 4);
+      margin-top: calc($line-height / 4);
     }
   }
 
diff --git a/app/assets/stylesheets/shared/in_favor_against.scss b/app/assets/stylesheets/shared/in_favor_against.scss
index a8b57e0db..c7a59f7cb 100644
--- a/app/assets/stylesheets/shared/in_favor_against.scss
+++ b/app/assets/stylesheets/shared/in_favor_against.scss
@@ -80,7 +80,7 @@
     display: inline-block;
     font-size: $small-font-size;
     line-height: $line-height * 2;
-    padding-right: calc(#{$line-height} / 2);
+    padding-right: calc($line-height / 2);
     vertical-align: top;
 
     @include breakpoint(medium) {
diff --git a/app/assets/stylesheets/shared/map_location.scss b/app/assets/stylesheets/shared/map_location.scss
index c52154298..df9513ba8 100644
--- a/app/assets/stylesheets/shared/map_location.scss
+++ b/app/assets/stylesheets/shared/map_location.scss
@@ -6,7 +6,7 @@
   color: $delete;
   cursor: pointer;
   margin-bottom: $line-height;
-  margin-top: calc(#{$line-height} / 2);
+  margin-top: calc($line-height / 2);
 
   &:hover,
   &:active,
diff --git a/app/assets/stylesheets/shared/social_share.scss b/app/assets/stylesheets/shared/social_share.scss
index 367c6bec2..9e0e00871 100644
--- a/app/assets/stylesheets/shared/social_share.scss
+++ b/app/assets/stylesheets/shared/social_share.scss
@@ -7,7 +7,7 @@
   width: $icon-width;
 
   &::before {
-    font-size: calc(#{$icon-width} / 2);
+    font-size: calc($icon-width / 2);
     margin-right: 0;
   }
 
diff --git a/app/assets/stylesheets/stats.scss b/app/assets/stylesheets/stats.scss
index 55a848fcf..7e4784ded 100644
--- a/app/assets/stylesheets/stats.scss
+++ b/app/assets/stylesheets/stats.scss
@@ -16,7 +16,7 @@
     }
 
     ul {
-      margin-left: calc(#{$line-height} / 2);
+      margin-left: calc($line-height / 2);
       margin-top: 0;
       padding: 0;
     }
@@ -37,7 +37,7 @@
 
     &::before {
       display: inline-block;
-      margin-right: calc(#{$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: calc(#{$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 0c0f8d96f..5517191bf 100644
--- a/app/assets/stylesheets/subscriptions.scss
+++ b/app/assets/stylesheets/subscriptions.scss
@@ -1,5 +1,5 @@
 .subscriptions-edit {
   form {
-    max-width: calc(#{$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 e9e5be9a8..a0feb20c9 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: calc(#{$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 beae40784..2169c8190 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: calc(#{$line-height} / 2);
+    margin-top: calc($line-height / 2);
   }
 }