title: In LESS, how to do "at-rule interpolation" to generate browser specific code?
body: <p>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 </p>
  
  <pre><code> @keyframes greenEffect {
        .effect(@green)
  }
  
  @-moz-keyframes greenEffect /* Firefox */ {
        .effect(@green)
  }
  
  @-webkit-keyframes greenEffect /* Safari and Chrome */ {
        .effect(@green)
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>To reduce workload, I need to find a way to do selector interpolation with @rule</p>
  
  <p>I 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-keyframes</p>
  
  <p>I am very new to LESS so I tried something like</p>
  
  <pre><code>.xBrowserEffect (@color, @className){
   @keyframes @{className} {
        .effect(@color)
  }
  
  @-moz-keyframes @{className} /* Firefox */ {
        .effect(@color)
  }
  
  @-webkit-keyframes @{className} /* Safari and Chrome */ {
        .effect(@color)
  }
  
  }
  </code></pre>
  
  <p>With this I want to be able to execute </p>
  
  <pre><code>.greenEffect{
    .xBrowserEffect (@green, greenEffect)
  }
  </code></pre>
  
  <p>and LESS will generate all that 3 select propert blocks</p>
  
  <p>I wonder if anyone knows a different approach to get this done. Thank you in advance.</p>
  
  <p>I am using lessc 1.3.3 at the moment, but any solutions for less 1.4.0 is welcome. </p>