Look guys I can sass

src/scss/_components.scss

-// Masonstrap 4.0 Components
-  
\ No newline at end of file

src/scss/_functions.scss

+// Get a key from the primary-palette map
+@function get-primary-palette($key) {
+  @if map-has-key($primary-palette, $key) {
+    @return map-get($primary-palette, $key);
+  }
+  
+  @warn "Unknown `#{$key}` in $primary-palette.";
+  @return null;
+}
+
+// Get a key from the universal-palette map
+@function get-universal-palette($key) {
+  @if map-has-key($universal-palette, $key) {
+    @return map-get($universal-palette, $key);
+  }
+  
+  @warn "Unknown `#{$key}` in $universal-palette.";
+  @return null;
+}
+
+// Get a key from the neutral-palette map
+@function get-neutral-palette($key) {
+  @if map-has-key($neutral-palette, $key) {
+    @return map-get($neutral-palette, $key);
+  }
+  
+  @warn "Unknown `#{$key}` in $neutral-palette.";
+  @return null;
+}

src/scss/_mixins.scss

+@mixin button-outline-variant($color, $color-hover: #fff) {
+    color: $color;
+    background-color: transparent;
+    background-image: none;
+    border-color: $color;
+  
+    @include hover {
+      color: $color-hover;
+      background-color: $color;
+      border-color: $color;
+    }
+  
+    &:focus,
+    &.focus {
+      box-shadow: 0 0 0 3px rgba($color, .5);
+    }
+  
+    &.disabled,
+    &:disabled {
+      color: $color;
+      background-color: transparent;
+    }
+  
+    &:active,
+    &.active,
+    .show > &.dropdown-toggle {
+      color: $color-hover;
+      background-color: $color;
+      border-color: $color;
+    }
+  }
+  
\ No newline at end of file

src/scss/_styles.scss

+@each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+      @include button-outline-variant($value, $gray-900);
+    }
+  }
+  
\ No newline at end of file

src/scss/_variables.scss

@@ -15,16 +15,6 @@ $primary-palette: (
   mason-gold: #FFCC33  
 );
 
-// Get a key from the primary-palette map
-@function get-primary-palette($key) {
-  @if map-has-key($primary-palette, $key) {
-    @return map-get($primary-palette, $key);
-  }
-
-  @warn "Unknown `#{$key}` in $primary-palette.";
-  @return null;
-}
-
 /*
   The universal palette colors work well as accent colors or as subtle
   backgrounds behind typography or graphics. Darker colors may be used behind
@@ -41,16 +31,6 @@ $universal-palette: (
   tangerine: #F7941E
 );
 
-// Get a key from the universal-palette map
-@function get-universal-palette($key) {
-  @if map-has-key($universal-palette, $key) {
-    @return map-get($universal-palette, $key);
-  }
-
-  @warn "Unknown `#{$key}` in $universal-palette.";
-  @return null;
-}
-
 /*
   The neutral palette can stand alone or be used to complement any of
   the other color palettes. A neutral tone is also a great bridge to drop
@@ -70,16 +50,6 @@ $neutral-palette: (
   school-of-art-stone: #D8D8C1
 );
 
-// Get a key from the neutral-palette map
-@function get-neutral-palette($key) {
-  @if map-has-key($neutral-palette, $key) {
-    @return map-get($neutral-palette, $key);
-  }
-
-  @warn "Unknown `#{$key}` in $neutral-palette.";
-  @return null;
-}
-
 // Bootstrap Color Overrides ---------------------------------------------------
 
 $white:  #fff;

src/scss/masonstrap.scss

@@ -5,12 +5,17 @@
  * source code: (https://git.gmu.edu/srct/masonstrap)
  * license: MIT (https://git.gmu.edu/srct/masonstrap/raw/master/LICENSE)
  */
-
+// Masonstrap custom functions
+@import "_functions";
 // Load in variable overwrites
-@import '_variables.scss';
-// Load in component overwrites
-@import '_components.scss';
+@import '_variables';
 // Load in FA 4
-@import '../../node_modules/font-awesome/scss/font-awesome.scss';
+@import '../../node_modules/font-awesome/scss/font-awesome';
 // Load in bootstrap 4
-@import '../../node_modules/bootstrap/scss/bootstrap.scss';
+@import '../../node_modules/bootstrap/scss/bootstrap';
+// Masonstrap custom mixins
+@import "_mixins";
+// Masonstrap custom overwrites
+@import "_overwrites";
+// Masonstrap custom styles
+@import "_styles";