diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index fb4ed894d3..84ffd6cea1 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -111,15 +111,11 @@
 }
 .carousel-control-prev {
   left: 0;
-  @if $enable-gradients {
-    background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
-  }
+  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
 }
 .carousel-control-next {
   right: 0;
-  @if $enable-gradients {
-    background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
-  }
+  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
 }
 
 // Icons for within
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 4bfa8ac9df..8a7572828d 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -166,9 +166,7 @@
     pointer-events: none;
     background-color: transparent;
     // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
+    background-image: if($enable-gradients, none, null);
   }
 }
 
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 8dc2c882a7..92fe214d14 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -43,9 +43,8 @@
   .show > &.dropdown-toggle {
     color: $active-color;
     background-color: $active-background;
-    @if $enable-gradients {
-      background-image: none; // Remove the gradient for the pressed/active state
-    }
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
     border-color: $active-border;
 
     &:focus {
@@ -62,11 +61,9 @@
   &.disabled {
     color: $color;
     background-color: $background;
-    border-color: $border;
     // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
+    background-image: if($enable-gradients, none, null);
+    border-color: $border;
   }
 }