diff --git a/scss/_alert.scss b/scss/_alert.scss
index dd43e2376a..da2a98af94 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -27,7 +27,7 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($close-font-size + $alert-padding-x * 2);
+  padding-right: $close-font-size + $alert-padding-x * 2;
 
   // Adjust close link position
   .close {
diff --git a/scss/_card.scss b/scss/_card.scss
index f3de02708b..377bec0f1a 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -43,7 +43,7 @@
 }
 
 .card-subtitle {
-  margin-top: -($card-spacer-y / 2);
+  margin-top: -$card-spacer-y / 2;
   margin-bottom: 0;
 }
 
@@ -99,15 +99,15 @@
 //
 
 .card-header-tabs {
-  margin-right: -($card-spacer-x / 2);
+  margin-right: -$card-spacer-x / 2;
   margin-bottom: -$card-spacer-y;
-  margin-left: -($card-spacer-x / 2);
+  margin-left: -$card-spacer-x / 2;
   border-bottom: 0;
 }
 
 .card-header-pills {
-  margin-right: -($card-spacer-x / 2);
-  margin-left: -($card-spacer-x / 2);
+  margin-right: -$card-spacer-x / 2;
+  margin-left: -$card-spacer-x / 2;
 }
 
 // Card image
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 3ba447e300..8e6639ac07 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -187,9 +187,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: ((100% - $carousel-caption-width) / 2);
+  right: (100% - $carousel-caption-width) / 2;
   bottom: 20px;
-  left: ((100% - $carousel-caption-width) / 2);
+  left: (100% - $carousel-caption-width) / 2;
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 857a5b67a5..e6bf7ad6f5 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -10,8 +10,8 @@
 .custom-control {
   position: relative;
   display: block;
-  min-height: ($font-size-base * $line-height-base);
-  padding-left: ($custom-control-gutter + $custom-control-indicator-size);
+  min-height: $font-size-base * $line-height-base;
+  padding-left: $custom-control-gutter + $custom-control-indicator-size;
 }
 
 .custom-control-inline {
@@ -74,7 +74,7 @@
   // Background-color and (when enabled) gradient
   &::before {
     position: absolute;
-    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
     left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
@@ -89,7 +89,7 @@
   // Foreground (icon)
   &::after {
     position: absolute;
-    top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
+    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
     left: -($custom-control-gutter + $custom-control-indicator-size);
     display: block;
     width: $custom-control-indicator-size;
@@ -387,7 +387,7 @@
   &::-webkit-slider-thumb {
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
-    margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
+    margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
     @include gradient-bg($custom-range-thumb-bg);
     border: $custom-range-thumb-border;
     @include border-radius($custom-range-thumb-border-radius);
@@ -462,7 +462,7 @@
     cursor: $custom-range-track-cursor;
     background-color: transparent;
     border-color: transparent;
-    border-width: ($custom-range-thumb-height * .5);
+    border-width: $custom-range-thumb-height / 2;
     @include box-shadow($custom-range-track-box-shadow);
   }
 
diff --git a/scss/_images.scss b/scss/_images.scss
index 2bce02f631..8e69b772f8 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -32,7 +32,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer / 2);
+  margin-bottom: $spacer / 2;
   line-height: 1;
 }
 
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 6fb8c429b4..81b33077a6 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -163,7 +163,7 @@
 
 .input-group-lg > .custom-select,
 .input-group-sm > .custom-select {
-  padding-right: ($custom-select-padding-x + $custom-select-indicator-padding);
+  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
 }
 
 
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 3ef5f628bd..4a79fb7517 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -113,7 +113,7 @@
     left: 50%;
     display: block;
     width: $popover-arrow-width;
-    margin-left: ($popover-arrow-width / -2);
+    margin-left: -$popover-arrow-width / 2;
     content: "";
     border-bottom: $popover-border-width solid $popover-header-bg;
   }
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 92d4ec9b5b..a1150420f1 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -56,7 +56,7 @@
   thead {
     th,
     td {
-      border-bottom-width: (2 * $table-border-width);
+      border-bottom-width: 2 * $table-border-width;
     }
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c7ddad2768..339c0d872b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -300,7 +300,7 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      ($spacer / 2) !default;
+$headings-margin-bottom:      $spacer / 2 !default;
 $headings-font-family:        inherit !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -714,19 +714,19 @@ $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-divider-color:                 $gray-200 !default;
-$nav-divider-margin-y:              ($spacer / 2) !default;
+$nav-divider-margin-y:              $spacer / 2 !default;
 
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-y:                  $spacer / 2 !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
 
@@ -806,7 +806,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 ($grid-gutter-width / 2) !default;
+$card-group-margin:                 $grid-gutter-width / 2 !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index ff7e1496a6..649c28bf77 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -8,8 +8,8 @@
   %grid-column {
     position: relative;
     width: 100%;
-    padding-right: ($gutter / 2);
-    padding-left: ($gutter / 2);
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
   }
 
   @each $breakpoint in map-keys($breakpoints) {
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index b365a3ba17..924eb0cfc0 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -4,8 +4,8 @@
 
 @mixin make-container($gutter: $grid-gutter-width) {
   width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: $gutter / 2;
+  padding-left: $gutter / 2;
   margin-right: auto;
   margin-left: auto;
 }
@@ -23,8 +23,8 @@
 @mixin make-row($gutter: $grid-gutter-width) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: ($gutter / -2);
-  margin-left: ($gutter / -2);
+  margin-right: -$gutter / 2;
+  margin-left: -$gutter / 2;
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -33,8 +33,8 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: $gutter / 2;
+  padding-left: $gutter / 2;
 }
 
 @mixin make-col($size, $columns: $grid-columns) {