Move mixins to a separate file

// FREEBIE

stylesheets/_mixins.scss

@@ -0,0 +1,17 @@
+@mixin color-svg($svg, $color) {
+    -webkit-mask: url($svg) no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: $color;
+}
+@mixin header-icon-white($svg) {
+  @include color-svg($svg, rgba(255,255,255, 0.8));
+  &:focus, &:hover {
+    @include color-svg($svg, white);
+  }
+}
+@mixin header-icon-black($svg) {
+  @include color-svg($svg, rgba(0,0,0, 0.5));
+  &:focus, &:hover {
+    @include color-svg($svg, black);
+  }
+}

stylesheets/_variables.scss

@@ -42,20 +42,3 @@ $big-avatar-min-width: 900px;
 
 $border-radius: 5px;
 
-@mixin color-svg($svg, $color) {
-    -webkit-mask: url($svg) no-repeat center;
-    -webkit-mask-size: 100%;
-    background-color: $color;
-}
-@mixin header-icon-white($svg) {
-  @include color-svg($svg, rgba(255,255,255, 0.8));
-  &:focus, &:hover {
-    @include color-svg($svg, white);
-  }
-}
-@mixin header-icon-black($svg) {
-  @include color-svg($svg, rgba(0,0,0, 0.5));
-  &:focus, &:hover {
-    @include color-svg($svg, black);
-  }
-}

stylesheets/manifest.scss

@@ -4,7 +4,10 @@
 
 // Global Settings, Variables, and Mixins
   @import 'variables';
+  @import 'mixins';
   @import 'global';
+
+// Components
   @import 'progress';
 
 // Build the main view