From a812d9649ae037e623e67fffd803b8eb040ee7b9 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 2 Aug 2017 10:04:32 -0400
Subject: [PATCH] =?UTF-8?q?Solve=20generated=20mixin=20bug=20by=20adding?=
 =?UTF-8?q?=20quotes=20=F0=9F=99=8C=F0=9F=8F=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/generators.less               |   6 +
 src/generators/backgrounds.less   |  22 +--
 src/generators/border-colors.less |  22 +--
 src/generators/text-colors.less   |   8 +-
 src/generators/text-sizes.less    |   4 +-
 src/generators/text-weights.less  |   2 +-
 src/utilities/spacing.less        | 257 +++++++++++-------------------
 src/utilities/text.less           |  53 +++---
 8 files changed, 157 insertions(+), 217 deletions(-)

diff --git a/src/generators.less b/src/generators.less
index 8e6678c7a..9106e53b7 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -1,3 +1,9 @@
+.define-selector(@class, @ruleset) {
+  .@{class} {
+    @ruleset();
+  }
+}
+
 .apply-match(@map; @search; @ruleset) {
   @current: extract(extract(@map, 1), 1);
   .apply-match(@map; @search; @current; @ruleset; 1);
diff --git a/src/generators/backgrounds.less b/src/generators/backgrounds.less
index f380ced79..16abc83d3 100644
--- a/src/generators/backgrounds.less
+++ b/src/generators/backgrounds.less
@@ -1,23 +1,27 @@
-.generate-bg-utility(@name; @variant; @color) when (@variant = none) {
-  .bg-@{name} { background-color: @color; }
+.generate-bg-color-utility(@name; @variant; @color) when (@variant = 'default') {
+  .define-selector(~"bg-@{name}"; { background-color: @color; });
 }
 
-.generate-bg-utility(@name; @variant; @color) when not (@variant = none) {
-  .bg-@{name}-@{variant} { background-color: @color; }
+.generate-bg-color-utility(@name; @variant; @color) when not (@variant = 'default') {
+  .define-selector(~"bg-@{name}-@{variant}"; { background-color: @color; });
 }
 
-.generate-backgrounds(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
+.generate-bg-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
   @variant-name: extract(@color-variants, 1);
   @variant-color: extract(@color-variants, 2);
 
-  .generate-bg-utility(@color-name; @variant-name; @variant-color);
+  .generate-bg-color-utility(@color-name; @variant-name; @variant-color);
 }
 
-.generate-backgrounds(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
+.generate-bg-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
   @variant: extract(@color-variants, @i);
   @variant-name: extract(@variant, 1);
   @variant-color: extract(@variant, 2);
 
-  .generate-bg-utility(@color-name; @variant-name; @variant-color);
-  .generate-backgrounds(@color-name; @color-variants; @i + 1);
+  .generate-bg-color-utility(@color-name; @variant-name; @variant-color);
+  .generate-bg-color-utilities(@color-name; @color-variants; @i + 1);
+}
+
+.define-bg-color(@color-name; @color-variants) {
+    .generate-bg-color-utilities(@color-name; @color-variants);
 }
diff --git a/src/generators/border-colors.less b/src/generators/border-colors.less
index 8bc1eba4d..e95eea38a 100644
--- a/src/generators/border-colors.less
+++ b/src/generators/border-colors.less
@@ -1,27 +1,27 @@
-.generate-border-color-utility(@name; @variant; @color) when (@variant = none) {
-  .border-@{name} {
-    border-color: @color;
-  }
+.generate-border-color-utility(@name; @variant; @color) when (@variant = 'default') {
+  .define-selector(~"border-@{name}"; { border-color: @color; });
 }
 
-.generate-border-color-utility(@name; @variant; @color) when not (@variant = none) {
-  .border-@{name}-@{variant} {
-    border-color: @color;
-  }
+.generate-border-color-utility(@name; @variant; @color) when not (@variant = 'default') {
+  .define-selector(~"border-@{name}-@{variant}"; { border-color: @color; });
 }
 
-.generate-border-colors(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
+.generate-border-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
   @variant-name: extract(@color-variants, 1);
   @variant-color: extract(@color-variants, 2);
 
   .generate-border-color-utility(@color-name; @variant-name; @variant-color);
 }
 
-.generate-border-colors(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
+.generate-border-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
   @variant: extract(@color-variants, @i);
   @variant-name: extract(@variant, 1);
   @variant-color: extract(@variant, 2);
 
   .generate-border-color-utility(@color-name; @variant-name; @variant-color);
-  .generate-border-colors(@color-name; @color-variants; @i + 1);
+  .generate-border-color-utilities(@color-name; @color-variants; @i + 1);
+}
+
+.define-border-color(@color-name; @color-variants) {
+    .generate-border-color-utilities(@color-name; @color-variants);
 }
diff --git a/src/generators/text-colors.less b/src/generators/text-colors.less
index 436460b12..415c5a55e 100644
--- a/src/generators/text-colors.less
+++ b/src/generators/text-colors.less
@@ -1,9 +1,9 @@
-.generate-text-color-utility(@name; @variant; @color) when (@variant = default) {
-  .text-@{name} { color: @color; }
+.generate-text-color-utility(@name; @variant; @color) when (@variant = 'default') {
+  .define-selector(~"text-@{name}"; { color: @color; });
 }
 
-.generate-text-color-utility(@name; @variant; @color) when not (@variant = default) {
-  .text-@{name}-@{variant} { color: @color; }
+.generate-text-color-utility(@name; @variant; @color) when not (@variant = 'default') {
+  .define-selector(~"text-@{name}-@{variant}"; { color: @color; });
 }
 
 .generate-text-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
diff --git a/src/generators/text-sizes.less b/src/generators/text-sizes.less
index 2758dfe6e..8fd50e72d 100644
--- a/src/generators/text-sizes.less
+++ b/src/generators/text-sizes.less
@@ -1,7 +1,5 @@
 .generate-text-size-utility(@variant; @size) {
-  .text-@{variant} {
-    font-size: @size;
-  }
+  .define-selector(~"text-@{variant}"; { font-size: @size; });
 }
 
 .generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
diff --git a/src/generators/text-weights.less b/src/generators/text-weights.less
index 348fef173..54630a0cd 100644
--- a/src/generators/text-weights.less
+++ b/src/generators/text-weights.less
@@ -1,5 +1,5 @@
 .generate-weight-utility(@variant; @weight) {
-  .text-@{variant} { font-weight: @weight; }
+  .define-selector(~"text-@{variant}"; { font-weight: @weight; });
 }
 
 .generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 1) {
diff --git a/src/utilities/spacing.less b/src/utilities/spacing.less
index ceb42de52..9bebdf709 100644
--- a/src/utilities/spacing.less
+++ b/src/utilities/spacing.less
@@ -16,48 +16,23 @@
 @spacer-15: 30rem;
 
 @spacer-map:
-  px 1px,
-  0 @spacer-0,
-  1 @spacer-1,
-  2 @spacer-2,
-  3 @spacer-3,
-  4 @spacer-4,
-  5 @spacer-5,
-  6 @spacer-6,
-  7 @spacer-7,
-  8 @spacer-8,
-  9 @spacer-9,
-  10 @spacer-10,
-  11 @spacer-11,
-  12 @spacer-12,
-  13 @spacer-13,
-  14 @spacer-14,
-  15 @spacer-15;
-
-.pt(@spacer) { .apply-match(@spacer-map, @spacer, { padding-top: @__match; }); }
-.pr(@spacer) { .apply-match(@spacer-map, @spacer, { padding-right: @__match; }); }
-.pb(@spacer) { .apply-match(@spacer-map, @spacer, { padding-bottom: @__match; }); }
-.pl(@spacer) { .apply-match(@spacer-map, @spacer, { padding-left: @__match; }); }
-.py(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    padding-top: @__match;
-    padding-bottom: @__match;
-  });
-}
-.px(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    padding-right: @__match;
-    padding-left: @__match;
-  });
-}
-.p(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    padding-top: @__match;
-    padding-right: @__match;
-    padding-bottom: @__match;
-    padding-left: @__match;
-  });
-}
+  'px' 1px,
+  '0' @spacer-0,
+  '1' @spacer-1,
+  '2' @spacer-2,
+  '3' @spacer-3,
+  '4' @spacer-4,
+  '5' @spacer-5,
+  '6' @spacer-6,
+  '7' @spacer-7,
+  '8' @spacer-8,
+  '9' @spacer-9,
+  '10' @spacer-10,
+  '11' @spacer-11,
+  '12' @spacer-12,
+  '13' @spacer-13,
+  '14' @spacer-14,
+  '15' @spacer-15;
 
 .generate-padding-utilities(@i: 1) when (@i <= length(@spacer-map)) {
   @spacer: extract(@spacer-map, @i);
@@ -65,24 +40,24 @@
   @n: extract(@spacer, 1);
   @size: extract(@spacer, 2);
 
-  .pt-@{n} { padding-top: @size; }
-  .pr-@{n} { padding-right: @size; }
-  .pb-@{n} { padding-bottom: @size; }
-  .pl-@{n} { padding-left: @size; }
-  .py-@{n} {
+  .define-selector(~"pt-@{n}", { padding-top: @size; });
+  .define-selector(~"pr-@{n}", { padding-right: @size; });
+  .define-selector(~"pb-@{n}", { padding-bottom: @size; });
+  .define-selector(~"pl-@{n}", { padding-left: @size; });
+  .define-selector(~"py-@{n}", {
     padding-top: @size;
     padding-bottom: @size;
-  }
-  .px-@{n} {
+  });
+  .define-selector(~"px-@{n}", {
     padding-right: @size;
     padding-left: @size;
-  }
-  .p-@{n} {
+  });
+  .define-selector(~"p-@{n}", {
     padding-top: @size;
-    padding-bottom: @size;
     padding-right: @size;
+    padding-bottom: @size;
     padding-left: @size;
-  }
+  });
 
   .generate-padding-utilities(@i + 1);
 }
@@ -94,24 +69,24 @@
   @size: extract(@spacer, 2);
 
   @media (min-width: @screen-width) {
-    .@{prefix}pt-@{n} { padding-top: @size; }
-    .@{prefix}pr-@{n} { padding-right: @size; }
-    .@{prefix}pb-@{n} { padding-bottom: @size; }
-    .@{prefix}pl-@{n} { padding-left: @size; }
-    .@{prefix}py-@{n} {
+    .define-selector(~"@{prefix}pt-@{n}", { padding-top: @size; });
+    .define-selector(~"@{prefix}pr-@{n}", { padding-right: @size; });
+    .define-selector(~"@{prefix}pb-@{n}", { padding-bottom: @size; });
+    .define-selector(~"@{prefix}pl-@{n}", { padding-left: @size; });
+    .define-selector(~"@{prefix}py-@{n}", {
       padding-top: @size;
       padding-bottom: @size;
-    }
-    .@{prefix}px-@{n} {
+    });
+    .define-selector(~"@{prefix}px-@{n}", {
       padding-right: @size;
       padding-left: @size;
-    }
-    .@{prefix}p-@{n} {
+    });
+    .define-selector(~"@{prefix}p-@{n}", {
       padding-top: @size;
-      padding-bottom: @size;
       padding-right: @size;
+      padding-bottom: @size;
       padding-left: @size;
-    }
+    });
   }
 
   .generate-screen-padding-utilities(@screen; @screen-width; (@i + 1));
@@ -126,56 +101,30 @@
   .generate-responsive-padding-utilities(@i + 1);
 }
 
-.mt(@spacer) { .apply-match(@spacer-map, @spacer, { margin-top: @__match; }); }
-
-.mr(@spacer) { .apply-match(@spacer-map, @spacer, { margin-right: @__match; }); }
-.mb(@spacer) { .apply-match(@spacer-map, @spacer, { margin-bottom: @__match; }); }
-.ml(@spacer) { .apply-match(@spacer-map, @spacer, { margin-left: @__match; }); }
-.my(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    margin-top: @__match;
-    margin-bottom: @__match;
-  });
-}
-.mx(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    margin-right: @__match;
-    margin-left: @__match;
-  });
-}
-.m(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    margin-top: @__match;
-    margin-right: @__match;
-    margin-bottom: @__match;
-    margin-left: @__match;
-  });
-}
-
 .generate-margin-utilities(@i: 1) when (@i <= length(@spacer-map)) {
   @spacer: extract(@spacer-map, @i);
 
   @n: extract(@spacer, 1);
   @size: extract(@spacer, 2);
 
-  .mt-@{n} { margin-top: @size; }
-  .mr-@{n} { margin-right: @size; }
-  .mb-@{n} { margin-bottom: @size; }
-  .ml-@{n} { margin-left: @size; }
-  .my-@{n} {
+  .define-selector(~"mt-@{n}", { margin-top: @size; });
+  .define-selector(~"mr-@{n}", { margin-right: @size; });
+  .define-selector(~"mb-@{n}", { margin-bottom: @size; });
+  .define-selector(~"ml-@{n}", { margin-left: @size; });
+  .define-selector(~"my-@{n}", {
     margin-top: @size;
     margin-bottom: @size;
-  }
-  .mx-@{n} {
+  });
+  .define-selector(~"mx-@{n}", {
     margin-right: @size;
     margin-left: @size;
-  }
-  .m-@{n} {
+  });
+  .define-selector(~"m-@{n}", {
     margin-top: @size;
-    margin-bottom: @size;
     margin-right: @size;
+    margin-bottom: @size;
     margin-left: @size;
-  }
+  });
 
   .generate-margin-utilities(@i + 1);
 }
@@ -187,24 +136,24 @@
   @size: extract(@spacer, 2);
 
   @media (min-width: @screen-width) {
-    .@{prefix}mt-@{n} { margin-top: @size; }
-    .@{prefix}mr-@{n} { margin-right: @size; }
-    .@{prefix}mb-@{n} { margin-bottom: @size; }
-    .@{prefix}ml-@{n} { margin-left: @size; }
-    .@{prefix}my-@{n} {
+    .define-selector(~"@{prefix}mt-@{n}", { margin-top: @size; });
+    .define-selector(~"@{prefix}mr-@{n}", { margin-right: @size; });
+    .define-selector(~"@{prefix}mb-@{n}", { margin-bottom: @size; });
+    .define-selector(~"@{prefix}ml-@{n}", { margin-left: @size; });
+    .define-selector(~"@{prefix}my-@{n}", {
       margin-top: @size;
       margin-bottom: @size;
-    }
-    .@{prefix}mx-@{n} {
+    });
+    .define-selector(~"@{prefix}mx-@{n}", {
       margin-right: @size;
       margin-left: @size;
-    }
-    .@{prefix}m-@{n} {
+    });
+    .define-selector(~"@{prefix}m-@{n}", {
       margin-top: @size;
-      margin-bottom: @size;
       margin-right: @size;
+      margin-bottom: @size;
       margin-left: @size;
-    }
+    });
   }
 
   .generate-screen-margin-utilities(@screen; @screen-width; (@i + 1));
@@ -225,56 +174,30 @@
   .generate-responsive-margin-utilities(@i + 1);
 }
 
-.pull-t(@spacer) { .apply-match(@spacer-map, @spacer, { margin-top: ~"-@{__match}"; }); }
-
-.pull-r(@spacer) { .apply-match(@spacer-map, @spacer, { margin-right: ~"-@{__match}"; }); }
-.pull-b(@spacer) { .apply-match(@spacer-map, @spacer, { margin-bottom: ~"-@{__match}"; }); }
-.pull-l(@spacer) { .apply-match(@spacer-map, @spacer, { margin-left: ~"-@{__match}"; }); }
-.pull-y(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    margin-top: ~"-@{__match}";
-    margin-bottom: ~"-@{__match}";
-  });
-}
-.pull-x(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    margin-right: ~"-@{__match}";
-    margin-left: ~"-@{__match}";
-  });
-}
-.pull(@spacer) {
-  .apply-match(@spacer-map, @spacer, {
-    margin-top: ~"-@{__match}";
-    margin-right: ~"-@{__match}";
-    margin-bottom: ~"-@{__match}";
-    margin-left: ~"-@{__match}";
-  });
-}
-
 .generate-pull-utilities(@i: 1) when (@i <= length(@spacer-map)) {
   @spacer: extract(@spacer-map, @i);
 
   @n: extract(@spacer, 1);
   @size: extract(@spacer, 2);
 
-  .pull-t-@{n} { margin-top: ~"-@{size}"; }
-  .pull-r-@{n} { margin-right: ~"-@{size}"; }
-  .pull-b-@{n} { margin-bottom: ~"-@{size}"; }
-  .pull-l-@{n} { margin-left: ~"-@{size}"; }
-  .pull-y-@{n} {
+  .define-selector(~"pull-t-@{n}", { margin-top: ~"-@{size}"; });
+  .define-selector(~"pull-r-@{n}", { margin-right: ~"-@{size}"; });
+  .define-selector(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
+  .define-selector(~"pull-l-@{n}", { margin-left: ~"-@{size}"; });
+  .define-selector(~"pull-y-@{n}", {
     margin-top: ~"-@{size}";
     margin-bottom: ~"-@{size}";
-  }
-  .pull-x-@{n} {
+  });
+  .define-selector(~"pull-x-@{n}", {
     margin-right: ~"-@{size}";
     margin-left: ~"-@{size}";
-  }
-  .pull-@{n} {
+  });
+  .define-selector(~"pull-@{n}", {
     margin-top: ~"-@{size}";
-    margin-bottom: ~"-@{size}";
     margin-right: ~"-@{size}";
+    margin-bottom: ~"-@{size}";
     margin-left: ~"-@{size}";
-  }
+  });
 
   .generate-pull-utilities(@i + 1);
 }
@@ -286,24 +209,24 @@
   @size: extract(@spacer, 2);
 
   @media (min-width: @screen-width) {
-    .@{prefix}pull-t-@{n} { margin-top: ~"-@{size}";; }
-    .@{prefix}pull-r-@{n} { margin-right: ~"-@{size}";; }
-    .@{prefix}pull-b-@{n} { margin-bottom: ~"-@{size}";; }
-    .@{prefix}pull-l-@{n} { margin-left: ~"-@{size}";; }
-    .@{prefix}pull-y-@{n} {
-      margin-top: ~"-@{size}";;
-      margin-bottom: ~"-@{size}";;
-    }
-    .@{prefix}pull-x-@{n} {
-      margin-right: ~"-@{size}";;
-      margin-left: ~"-@{size}";;
-    }
-    .@{prefix}pull-@{n} {
-      margin-top: ~"-@{size}";;
-      margin-bottom: ~"-@{size}";;
-      margin-right: ~"-@{size}";;
-      margin-left: ~"-@{size}";;
-    }
+    .define-selector(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; });
+    .define-selector(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; });
+    .define-selector(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
+    .define-selector(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; });
+    .define-selector(~"@{prefix}pull-y-@{n}", {
+      margin-top: ~"-@{size}";
+      margin-bottom: ~"-@{size}";
+    });
+    .define-selector(~"@{prefix}pull-x-@{n}", {
+      margin-right: ~"-@{size}";
+      margin-left: ~"-@{size}";
+    });
+    .define-selector(~"@{prefix}pull-@{n}", {
+      margin-top: ~"-@{size}";
+      margin-right: ~"-@{size}";
+      margin-bottom: ~"-@{size}";
+      margin-left: ~"-@{size}";
+    });
   }
 
   .generate-screen-pull-utilities(@screen; @screen-width; (@i + 1));
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 832027311..ebdd42138 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -15,6 +15,15 @@
 @font-size-2xl: (30rem / 16rem); // 30px
 @font-size-3xl: (40rem / 16rem); // 40px
 
+@text-size-scale:
+  'xs' @font-size-xs,
+  'sm' @font-size-sm,
+  'base' @font-size-base,
+  'lg' @font-size-lg,
+  'xl' @font-size-xl,
+  '2xl' @font-size-2xl,
+  '3xl' @font-size-3xl;
+
 // Weights
 @font-weight-hairline: 200;
 @font-weight-thin: 300;
@@ -36,37 +45,37 @@
 
 // Sizes
 .define-text-sizes(
-    xs @font-size-xs,
-    sm @font-size-sm,
-    base @font-size-base,
-    lg @font-size-lg,
-    xl @font-size-xl,
-    2xl @font-size-2xl,
-    3xl @font-size-3xl
+  'xs' @font-size-xs,
+  'sm' @font-size-sm,
+  'base' @font-size-base,
+  'lg' @font-size-lg,
+  'xl' @font-size-xl,
+  '2xl' @font-size-2xl,
+  '3xl' @font-size-3xl
 ;);
 
 // Weights
 .define-text-weights(
-    hairline @font-weight-hairline,
-    thin @font-weight-thin,
-    regular @font-weight-regular,
-    medium @font-weight-medium,
-    bold @font-weight-bold
+  'hairline' @font-weight-hairline,
+  'thin' @font-weight-thin,
+  'regular' @font-weight-regular,
+  'medium' @font-weight-medium,
+  'bold' @font-weight-bold
 ;);
 
 // Colors
 .define-text-color(light;
-    default @text-light,
-    soft @text-light-soft,
-    softer @text-light-softer,
-    softest @text-light-softest
+  'default' @text-light,
+  'soft' @text-light-soft,
+  'softer' @text-light-softer,
+  'softest' @text-light-softest
 ;);
 
 .define-text-color(dark;
-    default @text-dark,
-    soft @text-dark-soft,
-    softer @text-dark-softer,
-    softest @text-dark-softest
+  'default' @text-dark,
+  'soft' @text-dark-soft,
+  'softer' @text-dark-softer,
+  'softest' @text-dark-softest
 ;);
 
 // Line heights
@@ -112,8 +121,8 @@
   &text-base { .text-base; }
   &text-lg { .text-lg; }
   &text-xl { .text-xl; }
-  // &text-2xl { .text-2xl; }
-  // &text-3xl { .text-3xl; }
+  &text-2xl { .text-2xl; }
+  &text-3xl { .text-3xl; }
   &text-hairline { .text-hairline; }
   &text-thin { .text-thin; }
   &text-regular { .text-regular; }