Lessで@keyframesにvendor-prefixを付ける

よく知られてゐるやうに、Lessでベンダープレフィックスを付けるには以下の通りにすると簡便だ。

.vendor(@property, @value) {
   -khtml-@{property} : @value;
     -moz-@{property} : @value;
      -ms-@{property} : @value;
       -o-@{property} : @value;
  -webkit-@{property} : @value;
          @{property} : @value;
}

div {
  .vendor(animation-duration, 0.3s);
}

ベンダープレフィックスは現在滅んでいってゐる。

cf. CSSやJSのvendor-prefixは、本来もなにも、標準的な規定までの準備として、未来のためにつくられ、つけられたものであった http://c4se.hatenablog.com/entry/2012/05/11/212648
cf. Chromium Blinkが出てvendor-prefixが消えてゆくだろう事が大変喜ばしいが http://c4se.hatenablog.com/entry/2013/04/05/033223

しかしBlinkですらまだ-webkit-のベンダープレフィックスが必要だ。animation系統が主に未だ要る。通常のプロパティであれば上記のmixinで対処できる。しかし@keyframesが面倒くさい。これにも未だベンダープレフィックスが要るのだ。
Lessのmixinは無駄に機能が増えてゐて、mixinにCSSブロックを渡せる。
cf. Passing Rulesets to Mixins http://lesscss.org/features/#detached-rulesets-feature
cf. LESS animation keyframes mixin http://codepen.io/zvuc/details/xvoys/
これを使へば簡潔に解決できる。

.keyframes(@name; @frames) {
     @-moz-keyframes @name { @frames(); }
      @-ms-keyframes @name { @frames(); }
  @-webkit-keyframes @name { @frames(); }
          @keyframes @name { @frames(); }
}

.keyframes(wavable-waving; {
     0% { left : 0; }
    25% { left : -3px; }
    50% { left : 0; }
    57% { left : 3px; }
   100% { left : 0; }
});

それだけ。