diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index da4738297c..13aad24875 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -2,22 +2,6 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
-@mixin box-shadow($shadow...) {
-  @if $enable-shadows {
-    box-shadow: $shadow;
-  }
-}
-
-@mixin transition($transition...) {
-  @if $enable-transitions {
-    @if length($transition) == 0 {
-      transition: $transition-base;
-    } @else {
-      transition: $transition;
-    }
-  }
-}
-
 // Utilities
 @import "mixins/breakpoints";
 @import "mixins/hover";
@@ -47,7 +31,9 @@
 // // Skins
 @import "mixins/background-variant";
 @import "mixins/border-radius";
+@import "mixins/box-shadow";
 @import "mixins/gradients";
+@import "mixins/transition";
 
 // // Layout
 @import "mixins/clearfix";
diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
new file mode 100644
index 0000000000..b2410e53ac
--- /dev/null
+++ b/scss/mixins/_box-shadow.scss
@@ -0,0 +1,5 @@
+@mixin box-shadow($shadow...) {
+  @if $enable-shadows {
+    box-shadow: $shadow;
+  }
+}
diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
new file mode 100644
index 0000000000..7e33dee319
--- /dev/null
+++ b/scss/mixins/_transition.scss
@@ -0,0 +1,9 @@
+@mixin transition($transition...) {
+  @if $enable-transitions {
+    @if length($transition) == 0 {
+      transition: $transition-base;
+    } @else {
+      transition: $transition;
+    }
+  }
+}