extract .alert-variant mix-in

less/alerts.less

@@ -43,37 +43,13 @@
 // -------------------------
 
 .alert-success {
-  background-color: @alert-success-bg;
-  border-color: @alert-success-border;
-  color: @alert-success-text;
-  hr {
-    border-top-color: darken(@alert-success-border, 5%);
-  }
-  .alert-link {
-    color: darken(@alert-success-text, 10%);
-  }
+  .alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text);
 }
 .alert-danger {
-  background-color: @alert-danger-bg;
-  border-color: @alert-danger-border;
-  color: @alert-danger-text;
-  hr {
-    border-top-color: darken(@alert-danger-border, 5%);
-  }
-  .alert-link {
-    color: darken(@alert-danger-text, 10%);
-  }
+  .alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
 }
 .alert-info {
-  background-color: @alert-info-bg;
-  border-color: @alert-info-border;
-  color: @alert-info-text;
-  hr {
-    border-top-color: darken(@alert-info-border, 5%);
-  }
-  .alert-link {
-    color: darken(@alert-info-text, 10%);
-  }
+  .alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text);
 }
 
 // Block alerts

less/mixins.less

@@ -361,6 +361,20 @@
   border-bottom: 1px solid @bottom;
 }
 
+// Alerts
+// -------------------------
+.alert-variant(@background, @border, @text-color) {
+  background-color: @background;
+  border-color: @border;
+  color: @text-color;
+  hr {
+    border-top-color: darken(@border, 5%);
+  }
+  .alert-link {
+    color: darken(@text-color, 10%);
+  }
+}
+
 // Button psuedo states
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,