How to iterate through a key value paired list, with Guards in LESS - less

Question

I'm working with LESS version 1.6.0 (not by choice). I read through the LESS documentation on Mixin Guards. I created a LESS function to cycle through a key-value list of colors, to generate CSS classes. Within this function, I want to set a condition to change the properties of my styles, if my prefixes are different. (i.e. txt and bg should have the same CSS declaration, while border has a different one). I believe my code below "is" doing that, but its also compounding my CSS properties for each class. Here is what I tried...
/*MY COLORS*/
#black-n25: #bfbfbf;
#black-n75: #4d4d4d;
#black: #000;
#white: #fff;
/*MY LIST (KEY VALUE PAIRS)*/
#colors: ~'black-n25' #black-n25, ~'black-n75' #black-n75, ~'black' #black, ~'white' #white;
/*MY FUNCTION TO CYCLE THROUGH MY LIST AND GENERATE CLASSES*/
.generate-classes(#list, #prefix, #mprop) {
.iter(length(#list));
.iter(#i) when (#i > 0) {
.iter(#i - 1);
#pair: extract(#list, #i); /*#colors -> #list -> #pair*/
#key: extract(#pair, 1); /*the key from #colors above*/
#value: extract(#pair, 2); /*the value from #colors above*/
/*this is where things go wrong...*/
.mixin(#prefix) when (#prefix = txt), (#prefix = bg) {
#{mprop}: #value;
}
.mixin(#prefix) when (#prefix = border) {
#{mprop}: solid 2rem #value;
}
.#{prefix}-#{key} {
.mixin(#prefix);
}
}
}
/*CALL FUNCTION FOR EACH CASE | PARAMETERS ARE...THE LIST, PREFIX (CSS SELECTOR NAME), AND CSS PROPERTY VALUE*/
.generate-classes(#colors,txt,color);
.generate-classes(#colors,bg,background-color);
.generate-classes(#colors,border,border);
...and a visual of what's being generated in the browser...
As you can see its compounding declarations for each class except the first class. Each CSS class should only have one declaration. What am I doing wrong?

Answer 1

This took some further digging. but now I can see, as of LESS version 1.5.0, CSS Guards can help when iterating through a key-value paired list items in LESS. I removed my use of Mixin Guards from my original logic and instead have the following setup, which now works.
This now gives me the flexibility to add many more colors and custom CSS declarations for custom prefixes, all within a single function.
/*MY COLORS*/
#black-n25: #bfbfbf;
#black-n75: #4d4d4d;
#black: #000;
#white: #fff;
/*MY LIST (KEY VALUE PAIRS)*/
#colors: ~'black-n25' #black-n25, ~'black-n75' #black-n75, ~'black' #black, ~'white' #white;
/*MY FUNCTION TO CYCLE THROUGH MY LIST AND GENERATE CLASSES*/
.generate-classes(#list, #prefix, #mprop) {
.iter(length(#list));
.iter(#i) when (#i > 0) {
.iter(#i - 1);
#pair: extract(#list, #i); /*#colors -> #list -> #pair*/
#key: extract(#pair, 1); /*the key from #colors above*/
#value: extract(#pair, 2); /*the value from #colors above*/
/*this now works and sets a single declaration for each class...*/
.#{prefix}-#{key} when (#prefix = txt), (#prefix = bg) {
#{mprop}: #value;
}
.#{prefix}-#{key} when (#prefix = border) {
#{mprop}: solid 2rem #value;
}
}
}
/*CALL FUNCTION FOR EACH CASE | PARAMETERS ARE...THE LIST, PREFIX (CSS SELECTOR NAME), AND CSS PROPERTY VALUE*/
.generate-classes(#colors,txt,color);
.generate-classes(#colors,bg,background-color);
.generate-classes(#colors,border,border);