In LESS, how to use selector interpolation to generate browser specific code?

narotic

New Member
I am working with the new CSS3 animation properties and the painful part of it is that for each color effect, you have to have a full set of \[code\] @keyframes greenEffect { .effect(@green)}@-moz-keyframes greenEffect /* Firefox */ { .effect(@green)}@-webkit-keyframes greenEffect /* Safari and Chrome */ { .effect(@green)}\[/code\]Now when I have 16 colors or so, I really don't want to copy + paste 16 blocks of code. 16 lines are bad enough. To reduce workload, I need to find a way to do selector interpolation with @ruleI found out that selector interpolation syntax is .@{VARIABLE-NAME} after 1.3.1, but it throws a compile error when used together with @keyframes, or @-moz-keyframesI am very new to LESS so I tried something like\[code\].xBrowserEffect (@color, @className){ @keyframes .@{className} { .effect(@color)}@-moz-keyframes .@{className} /* Firefox */ { .effect(@color)}@-webkit-keyframes .@{className} /* Safari and Chrome */ { .effect(@color)}}\[/code\]With this I want to be able to execute \[code\].greenEffect{ .xBrowserEffect (@green, greenEffect)}\[/code\]and LESS will generate all that 3 select propert blocksI wonder if anyone knows a different approach to get this done. Thank you in advance.I am using lessc 1.3.3 at the moment, but any solutions for less 1.4.0 is welcome.
 
Back
Top