diff --git a/less/mixins.less b/less/mixins.less
index 3af3c8208..0cd060751 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -577,6 +577,15 @@
   }
 }
 
+// Contextual backgrounds
+// -------------------------
+.bg-variant(@color) {
+  background-color: @color;
+  a&:hover {
+    background-color: darken(@color, 10%);
+  }
+}
+
 // Navbar vertical align
 // -------------------------
 // Vertically center elements in the navbar.
diff --git a/less/type.less b/less/type.less
index 91496dc8c..3e037ae96 100644
--- a/less/type.less
+++ b/less/type.less
@@ -129,34 +129,19 @@ cite    { font-style: normal; }
   // Given the contrast here, this is the only class to have its color inverted
   // automatically.
   color: #fff;
-  background-color: @brand-primary;
-  a&:hover {
-    background-color: darken(@brand-primary, 10%);
-  }
+  .bg-variant(@brand-primary);
 }
 .bg-success {
-  background-color: @state-success-bg;
-  a&:hover {
-    background-color: darken(@state-success-bg, 10%);
-  }
+  .bg-variant(@state-success-bg);
 }
 .bg-info {
-  background-color: @state-info-bg;
-  a&:hover {
-    background-color: darken(@state-info-bg, 10%);
-  }
+  .bg-variant(@state-info-bg);
 }
 .bg-warning {
-  background-color: @state-warning-bg;
-  a&:hover {
-    background-color: darken(@state-warning-bg, 10%);
-  }
+  .bg-variant(@state-warning-bg);
 }
 .bg-danger {
-  background-color: @state-danger-bg;
-  a&:hover {
-    background-color: darken(@state-danger-bg, 10%);
-  }
+  .bg-variant(@state-danger-bg);
 }