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);

Answer 1

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.