diff --git a/src/css/_animations.scss b/src/css/_animations.scss
new file mode 100644
index 000000000..859b600cd
--- /dev/null
+++ b/src/css/_animations.scss
@@ -0,0 +1,58 @@
+@keyframes container-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes fill-unfill-rotate {
+  12.5% { transform: rotate(135deg); } // 0.5 * ARCSIZE
+  25%   { transform: rotate(270deg); } // 1   * ARCSIZE
+  37.5% { transform: rotate(405deg); } // 1.5 * ARCSIZE
+  50%   { transform: rotate(540deg); } // 2   * ARCSIZE
+  62.5% { transform: rotate(675deg); } // 2.5 * ARCSIZE
+  75%   { transform: rotate(810deg); } // 3   * ARCSIZE
+  87.5% { transform: rotate(945deg); } // 3.5 * ARCSIZE
+  to    { transform: rotate(1080deg); } // 4  * ARCSIZE
+}
+
+@keyframes left-spin {
+  from { transform: rotate(130deg); }
+  50% { transform: rotate(-5deg); }
+  to { transform: rotate(130deg); }
+}
+
+@keyframes right-spin {
+  from { transform: rotate(-130deg); }
+  50% { transform: rotate(5deg); }
+  to { transform: rotate(-130deg); }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ripple-pop {
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+  20% {
+    opacity: 1;
+  }
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
diff --git a/src/css/_global.scss b/src/css/_global.scss
index 03e9b87b4..be211c84b 100644
--- a/src/css/_global.scss
+++ b/src/css/_global.scss
@@ -33,3 +33,20 @@ textarea {
     padding: 0;
   }
 }
+
+.unbutton {
+  display: inline-block;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.toolbar,
+.main,
+.drop-overlay {
+  display: none;
+}
diff --git a/src/css/_mixins.scss b/src/css/_mixins.scss
new file mode 100644
index 000000000..b3acb6098
--- /dev/null
+++ b/src/css/_mixins.scss
@@ -0,0 +1,4 @@
+@mixin user-select($spec...) {
+  -webkit-user-select: $spec;
+  user-select: $spec;
+}
diff --git a/src/css/_utils.scss b/src/css/_utils.scss
index bdc2b6958..e574c815f 100644
--- a/src/css/_utils.scss
+++ b/src/css/_utils.scss
@@ -1,36 +1,3 @@
-@mixin user-select($spec...) {
-  -webkit-user-select: $spec;
-  user-select: $spec;
-}
-
-// transition & animation
-$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
-$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-
-$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
-$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
-$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
-$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
-$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
-$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
-$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
-$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
-$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-
 .bg-dark {
   background-color: rgba(0, 0, 0, 0.7);
 }
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
new file mode 100644
index 000000000..a1ddf4f7d
--- /dev/null
+++ b/src/css/_variables.scss
@@ -0,0 +1,27 @@
+// transition & animation
+$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
+$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+
+$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
+$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
+$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
+$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
+$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
+$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
+$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
+$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
+$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
diff --git a/src/css/all.scss b/src/css/all.scss
index 8c239ff1d..59ded85ec 100644
--- a/src/css/all.scss
+++ b/src/css/all.scss
@@ -1,3 +1,6 @@
-@import 'utils';
+@import 'variables';
+@import 'mixins';
 @import 'main-layout';
 @import 'components';
+@import 'animations';
+@import 'utils';
diff --git a/src/css/components/_ripple.scss b/src/css/components/_ripple.scss
index 5b017bf84..6bfb565b0 100644
--- a/src/css/components/_ripple.scss
+++ b/src/css/components/_ripple.scss
@@ -1,17 +1,3 @@
-@keyframes ripple-pop {
-  from {
-    transform: scale(0);
-    opacity: 1;
-  }
-  20% {
-    opacity: 1;
-  }
-  to {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
 .ripple {
   position: absolute;
   top: -2px;
diff --git a/src/css/components/_spinner.scss b/src/css/components/_spinner.scss
index a731a3917..10cd5240b 100644
--- a/src/css/components/_spinner.scss
+++ b/src/css/components/_spinner.scss
@@ -1,48 +1,3 @@
-@keyframes container-rotate {
-  to { transform: rotate(360deg); }
-}
-
-@keyframes fill-unfill-rotate {
-  12.5% { transform: rotate(135deg); } // 0.5 * ARCSIZE
-  25%   { transform: rotate(270deg); } // 1   * ARCSIZE
-  37.5% { transform: rotate(405deg); } // 1.5 * ARCSIZE
-  50%   { transform: rotate(540deg); } // 2   * ARCSIZE
-  62.5% { transform: rotate(675deg); } // 2.5 * ARCSIZE
-  75%   { transform: rotate(810deg); } // 3   * ARCSIZE
-  87.5% { transform: rotate(945deg); } // 3.5 * ARCSIZE
-  to    { transform: rotate(1080deg); } // 4   * ARCSIZE
-}
-
-@keyframes left-spin {
-  from { transform: rotate(130deg); }
-  50% { transform: rotate(-5deg); }
-  to { transform: rotate(130deg); }
-}
-
-@keyframes right-spin {
-  from { transform: rotate(-130deg); }
-  50% { transform: rotate(5deg); }
-  to { transform: rotate(-130deg); }
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 .spinner {
   display: inline-block;
   position: relative;
diff --git a/src/css/head.scss b/src/css/head.scss
index e0d009f26..b82af5beb 100644
--- a/src/css/head.scss
+++ b/src/css/head.scss
@@ -1,22 +1,7 @@
+@import 'variables';
+@import 'mixins';
 @import 'fonts';
-@import 'utils';
 @import 'global';
 @import 'components/main-menu';
 @import 'components/preloader';
-
-.unbutton {
-  display: inline-block;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.toolbar,
-.main,
-.drop-overlay {
-  display: none;
-}
+@import 'utils';