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">