From 3d98e3a1a13f41e7a0795bc3e4d9c898a783197d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 1 Aug 2017 17:04:27 -0400 Subject: [PATCH] Add basic background generator mixins --- src/utilities/backgrounds.less | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less index 68f725b62..fefd65116 100644 --- a/src/utilities/backgrounds.less +++ b/src/utilities/backgrounds.less @@ -10,6 +10,30 @@ @bg-highlight: hsl(215, 99%, 63%); +.generate-bg-utility(@name; @variant; @color) when (@variant = none) { + .bg-@{name} { background-color: @color; } +} + +.generate-bg-utility(@name; @variant; @color) when not (@variant = none) { + .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) { + @variant-name: extract(@color-variants, 1); + @variant-color: extract(@color-variants, 2); + + .generate-bg-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) { + @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); +} + .bg-light { background-color: @bg-light; } .bg-light-soft { background-color: @bg-light-soft; } .bg-light-softer { background-color: @bg-light-softer; }