Less - using classes created inside protected mixins

Question

I have the following code less:

.loop (@index) when (@index >= 10) { (~" .font@ {index}") { font-size: ~"@{index}px"; } .loop(@index - 1); } .loop (0) {} .loop (10); 

which outputs:

 .font15 { font-size: 15px; } .font14 { font-size: 14px; } .font13 { font-size: 13px; } .font12 { font-size: 12px; } .font11 { font-size: 11px; } .font10 { font-size: 10px; } 

At the end of the Less document, I have this class:

 .title{ font-size:14px; margin-bottom:0.5em; .font13; } 

I use WinLess to compile it, and I get the error ".font13" undefined Is there a way to use the class defined "dynamically" in the same document?

Thanks!

Answer 1

Unfortunately. Selector interpolation is just string interpolation, and the string is then printed in CSS, so no class object is generated in the Less run.

So the best way to do something like this is to create a getter mixin (which you can call from other rules) and maybe a mixin generator (which writes .font10 , .font11 , ... .fontNN ) ... later is not required if you want to generate classes only in a loop (and you can just combine it with a loop).

Something like that:

 .getFont(@size) { font-size: ~"@{size}px"} .genFontClass (@size) { (~" .font@ {size}") { .getFont(@size); } } 

and then you can use your loop to generate .fontNN classes:

 .loop (@index) when (@index >= 10) { .genFontClass (@index); .loop(@index - 1); } .loop (@index) when (@index < 10) {} 

using for example index 13:

 .loop (13); 

with CSS output :

 .font13 { font-size: 13px; } .font12 { font-size: 12px; } .font11 { font-size: 11px; } .font10 { font-size: 10px; } 

and regardless of these generated classes that were printed directly on the output CSS (and are not available from other Less rules), you can call getter mixin, add the necessary properties to your rules, in our example, the font for the desired index is 13:

 .title{ margin-bottom:0.5em; .getFont(13); } 

which will now add the font size property to the .title rule.

CSS

 .title { margin-bottom: 0.5em; font-size: 13px; } 

Hope this helps.