Can't create dynamic classes using Less mixins

Question

I'm trying to create dynamic classes using Less without hardcoding every color, like this:

<p class="text-red">Red text</p>
<p class="text-green">Green text</p>
<p class="text-blue">Blue text</p>

// Mixin
.text-(@color) {
    color: @color;
}

// Selector
.text-@{color} {
    .yog-color(@{color});
}

But it's not working, and compiler is not returning any error message, any clue for what could be wrong with this code?

I'm afraid your example is not complete to suggest something usable. It's not clear how you set `@color` value, where `.yog-color` is defined and so on... Well, I can guess what you need is something [like this](https://gist.github.com/seven-phases-max/0f8e412254bdad470a7bfeaa714e7cc0) (a silly version) or like [this](https://stackoverflow.com/questions/25875846) (the 4th method in particular) but there's zillion possible variants depending on what your final goal is... — seven-phases-max, Apr 04 '19 at 19:19
Is it possible to use the selector name as the mixin argument, instead of hardcoding all possible colors? eg: selector `my-color-red`, the word "red" is an attribute for the `.text-(@color)` mixin — henriquehbr, Apr 04 '19 at 20:13
*selector name as the mixin argument* - hmm, are you looking for something [like this](https://stackoverflow.com/questions/50037400)? (Then the answer is no, because it's not HTML values (inlc. class names you use) are passes to CSS but in opposite. For the CSS to be able to use some colors - the colors must be explicitly listed somewhere). If it's the case - your only solution would be a JS script. — seven-phases-max, Apr 04 '19 at 20:49

0 Answers0