Simplify Sass code reuse

Author: thibaudcolas

pattern_library/static/pattern_library/src/scss/_config.scss

@@ -2,3 +2,13 @@
 $site-title: 'Django Pattern Library';
 $color-primary: #34b2b2;
 $family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+
+// $color--primary + $family--primary are in _config.scss
+$white: #fff;
+$off-white: #f6f6f6;
+$light-grey: #c4c4c4;
+$mid-grey: #606060;
+$off-black: #333;
+$black: #000;
+$link-color:#0001ee;
+$sidebar-width: 230px;

pattern_library/static/pattern_library/src/scss/abstracts/_animations.scss

@@ -50,10 +50,29 @@ a {
     background: #f1f1f1;
 }
 
-.is-hidden {
-    @include hidden();
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+    clip: rect(1px, 1px, 1px, 1px);
 }
 
-.sr-only {
-    @include hidden();
+@keyframes fadeInOut {
+	0% {
+		opacity: 0;
+    }
+
+    20% {
+        opacity: 1;
+    }
+
+    80% {
+        opacity: 1;
+    }
+
+	100% {
+		opacity: 0;
+	}
 }

pattern_library/static/pattern_library/src/scss/abstracts/_base.scss

@@ -4,9 +4,6 @@
 @import 'config';
 
 // Abstracts
-@import 'abstracts/mixins';
-@import 'abstracts/variables';
-@import 'abstracts/animations';
 @import 'abstracts/base';
 
 // Components

pattern_library/static/pattern_library/src/scss/abstracts/_mixins.scss

@@ -24,7 +24,7 @@ <h1 class="header__title">
     </header>
     <aside class="sidebar">
         <div class="sidebar__inner">
-            <label for="js-pattern-search-input" class="is-hidden">Search pattern library</label>
+            <label for="js-pattern-search-input" class="sr-only">Search pattern library</label>
             <input type="text" class="sidebar__search" id="js-pattern-search-input" placeholder="Search library...">
             <div class="sidebar__search-results" id="js-pattern-search-results-container"></div>
             <nav class="sidebar__nav" id="sidebar-nav">