diff --git a/Gruntfile.js b/Gruntfile.js
index 97f56850..a3f6fe32 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -64,6 +64,13 @@ module.exports = function (grunt) {
               replacement: '@include navbar-variations(unquote($1), $2);\n',
               order: 24
             },
+
+            // alert generic-variations (convert this one last - very broad search)
+            { // Multi-line replacement - https://regex101.com/r/jB1uL1/1
+              pattern: /.generic-variations\(unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg,
+              replacement: '@include alert-variations(unquote($1), $3);\n',
+              order: 250 // very broad search, do this last
+            }
           ]
         }
       }
diff --git a/sass/_alerts.scss b/sass/_alerts.scss
index d4735d92..e44bd0c3 100644
--- a/sass/_alerts.scss
+++ b/sass/_alerts.scss
@@ -2,14 +2,7 @@
     border: 0px;
     border-radius: 0;
 
-    .generic-variations(unquote(""), $darkbg-text, {
-        background-color: $material-color;
-        color: $material-text-color;
-
-        a, .alert-link {
-            color: $material-text-color;
-        }
-    });
+    @include alert-variations(unquote(""), $darkbg-text);
 
     &-info, &-danger, &-warning, &-success {
         color: $darkbg-text;
diff --git a/sass/_mixins-shared.scss b/sass/_mixins-shared.scss
index 0914a9c3..d5a7b159 100644
--- a/sass/_mixins-shared.scss
+++ b/sass/_mixins-shared.scss
@@ -113,6 +113,23 @@
   }
 }
 
+// alert-variations("", $primary)
+@mixin alert-variations($extra, $default) {
+  @include generic-variations($extra, $default, "alert-variations-content", null);
+}
+
+@mixin alert-variations-content($args){
+  $material-color: map-get($args, material-color);
+  $material-text-color: map-get($args, material-text-color);
+
+  background-color: $material-color;
+  color: $material-text-color;
+
+  a, .alert-link {
+    color: $material-text-color;
+  }
+}
+
 // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
 @mixin call-variations-content-mixin($args) {
   $mixin-name: map-get($args, mixin-name);
@@ -132,6 +149,8 @@
     @include bg-img-variations-content($args);
   } @else if $mixin-name == navbar-variations-content {
     @include navbar-variations-content($args);
+  }@else if $mixin-name == alert-variations-content {
+    @include alert-variations-content($args);
   } @else {
     @error "Unknown mixin: #{$mixin-name}"
   }