diff --git a/scss/_variables.scss b/scss/_variables.scss
index de88cc2294..8219065652 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -254,6 +254,8 @@ $component-active-color:      $white !default;
 $component-active-bg:         theme-color("primary") !default;
 
 $caret-width:                 .3em !default;
+$caret-vertical-align:        $caret-width * .85 !default;
+$caret-spacing:               $caret-width * .85 !default;
 
 $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index 982522c54b..8ecef65b47 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -29,8 +29,8 @@
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-left: $caret-width * .85;
-      vertical-align: $caret-width * .85;
+      margin-left: $caret-spacing;
+      vertical-align: $caret-vertical-align;
       content: "";
       @if $direction == down {
         @include caret-down;
@@ -48,8 +48,8 @@
 
       &::before {
         display: inline-block;
-        margin-right: $caret-width * .85;
-        vertical-align: $caret-width * .85;
+        margin-right: $caret-spacing;
+        vertical-align: $caret-vertical-align;
         content: "";
         @include caret-left;
       }