diff --git a/src/generators/backgrounds.less b/src/generators/backgrounds.less
index 3c989a981..7dddaabf6 100644
--- a/src/generators/backgrounds.less
+++ b/src/generators/backgrounds.less
@@ -1,16 +1,16 @@
-.define-bg-color(@color-name; @variants) {
-  .generate-utility-variants(~"bg-@{color-name}"; @variants; {
+.define-bg-colors(@variants) {
+  .generate-utility-variants('bg'; @variants; {
     background-color: extract(@__variant-value, 2);
   });
 }
 
-.define-bg-color(@color-name; @variants; none) {
-  .define-bg-color(@color-name; @variants);
+.define-bg-colors(@variants; none) {
+  .define-bg-colors(@variants);
 }
 
-.define-bg-color(@color-name; @variants; @screens) when not (@screens = none) {
-  .define-bg-color(@color-name; @variants);
-  .generate-responsive-utility-variants(~"bg-@{color-name}"; @variants; @screens; {
+.define-bg-colors(@variants; @screens) when not (@screens = none) {
+  .define-bg-colors(@variants);
+  .generate-responsive-utility-variants('bg'; @variants; @screens; {
     background-color: extract(@__variant-value, 2);
   });
 }
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index ddbff7152..920245d40 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -1,20 +1,11 @@
-@bg-light: hsl(0, 0%, 100%);
-@bg-light-soft: hsl(0, 0%, 98%);
-@bg-light-softer: hsl(0, 0%, 96%);
+@bg-colors:
+  'light' hsl(0, 0%, 100%),
+  'light-soft' hsl(0, 0%, 98%),
+  'light-softer' hsl(0, 0%, 96%),
 
-@bg-dark: hsl(0, 0%, 33%);
-@bg-dark-soft: hsl(0, 0%, 42%);
-@bg-dark-softer: hsl(0, 0%, 52%);
+  'dark' hsl(0, 0%, 33%),
+  'dark-soft' hsl(0, 0%, 42%),
+  'dark-softer' hsl(0, 0%, 52%),
+;
 
-@bg-light-scale:
-  default @bg-light,
-  'soft' @bg-light-soft,
-  'softer' @bg-light-softer;
-
-@bg-dark-scale:
-  default @bg-dark,
-  'soft' @bg-dark-soft,
-  'softer' @bg-dark-softer;
-
-.define-bg-color('light'; @bg-light-scale; @screens);
-.define-bg-color('dark'; @bg-dark-scale; @screens);
+.define-bg-colors(@bg-colors; @screens);