Dynamic prefixed keyframe generation with LESS CSS

Question

I'm currently trying to find a way to generate prefixed keyframes with Less.

This is the loop that generates the prefixed versions, and it works. The only problem is when I add a from{} to{} declaration inside the dostuff animation it breaks it and causes Less to treat them like a mixin. Is there any way to get this to work?

@key-prefix: ~"@-webkit-",~"@-o-",~"@-moz-",~"@";
.generate-keyframes(@i) when (@i > 0) {
    .load1-keyframes((@i - 1));
    @prefix: extract(@key-prefix,@i);
    @{prefix}keyframes dostuff {

    }
}
.generate-keyframes(4);

I do not believe what you're trying to do is possible. Even if it is, why not just generate the few extra lines for other prefixes? It has ***very*** little effect on performance. To find out how to do so [this page](http://radiatingstar.com/css-keyframes-animations-with-less) may help — Zach Saucier, May 04 '14 at 22:22
Answer in http://stackoverflow.com/a/16147018/216129 has some tangentially relevant info. — Jari Keinänen, May 06 '15 at 06:48

seven-phases-max · Accepted Answer · 2014-05-05T20:03:30.310

In short, no, an interpolation of the at-rule directive identifiers is not supported (and is not planned to be).

Well, you can get what you want with something like:

.vendorize-keyframes(dostuff, {
    0% {color: tomato}
    to {color: potato}
});


.vendorize-keyframes(@name, @frames)  {
  @-webkit-keyframes @name {@frames();}
     @-moz-keyframes @name {@frames();}
       @-o-keyframes @name {@frames();}
          @keyframes @name {@frames();}
}

But in general the recommendation is to consider to use a tool like autoprefixer and stop polluting your Less and/or CSS code with these hardcoded vendor prefixes.

Dynamic prefixed keyframe generation with LESS CSS

1 Answers1