title: Can I define a LESS mixin to generate a transition-property with a variable number of parameters?
body: <p>I'm introducing LESS to a large web app project to simplify my CSS. I've got a few CSS rules which apply transitions to a varying number of properties, for example:</p>
  <pre><code>.movable {
      transition-property: top, left;
      transition-duration: 0.2s;
      transition-timing-function: ease;
  }
  
  .fadeAndStretchable {
      transition-property: opacity, width, height, margin;
      transition-duration: 1.5s;
      transition-timing-function: ease-out;
  }
  </code></pre>
  <p>(Note: I've omitted <code>-webkit</code>, <code>-moz</code> and <code>-o</code> properties here for brevity: in reality each of these rules is 12 lines long rather than 3.)</p>
  <p>Note that the values for <code>transition-property</code> are comma-separated. This is unusual in CSS: multiple values are usually space-separated (as in <code>border: 1px solid #f00</code>). LESS mixins can use the special <code>@arguments</code> value to <a href="http://lesscss.org/#-parametric-mixins" rel="noreferrer">produce a space-separated list of all the mixin arguments</a> - but is it possible to define a LESS mixin that takes a variable number of parameters and turns them into a comma-separated value list, suitable for <code>transition-property</code>?</p>
  <p>If necessary, I'm happy with a solution that requires two mixins: one for <code>transition-property</code> and another for <code>transition-duration</code> and <code>transition-timing-function</code>. Here's what I've tried so far:</p>
  <h3>Attempt 1: using @arguments with unnamed parameters</h3>
  <pre><code>.transition-property() {
      -webkit-transition-property: @arguments;
      -moz-transition-property: @arguments;
      -o-transition-property: @arguments;
      transition-property: @arguments;
  }
  
  .movable {
      .transition-property(top, left);
  }
  </code></pre>
  <p>Result: LESS error (&quot;No matching definition was found for '.transition-property(top, left)'&quot;)</p>
  <h3>Attempt 2: using @arguments with named parameters</h3>
  <pre><code>.transition-property(@p1, @p2, @p3, @p4, @p5) {
      -webkit-transition-property: @arguments;
      -moz-transition-property: @arguments;
      -o-transition-property: @arguments;
      transition-property: @arguments;
  }
  
  .movable {
      .transition-property(top, left);
  }
  </code></pre>
  <p>Result: LESS error (&quot;No matching definition was found for '.transition-property(top, left)'&quot;)</p>
  <h3>Attempt 3: using named parameters with dummy default values</h3>
  <pre><code>.transition-property(@p1:p1, @p2:p2, @p3:p3, @p4:p4, @p5:p5) {
      -webkit-transition-property: @p1, @p2, @p3, @p4, @p5;
      -moz-transition-property:  @p1, @p2, @p3, @p4, @p5;
      -o-transition-property:  @p1, @p2, @p3, @p4, @p5;
      transition-property:  @p1, @p2, @p3, @p4, @p5;
  }
  
  .movable {
      .transition-property(top, left);
  }
  </code></pre>
  <p>Result: No LESS error but it generates a CSS rule <code>-webkit-transition-property: top, left, p3, p4, p5</code> that the browser ignores because of the unrecognised properties.</p>
  <p>I've tried various other approaches (e.g. passing the property as a string <code>'top,left'</code>) but all result in the same thing: either a LESS error or invalid CSS.</p>
  <p><strong>Is there any way round this?</strong> Or do I have to bite the bullet and define a set of mixins overloaded on arity, e.g.</p>
  <pre><code>.transition-property(@p1) {...}
  .transition-property(@p1, @p2) {...}
  .transition-property(@p1, @p2, @p3) {...}
  .transition-property(@p1, @p2, @p3, @p4) {...}
  etc.
  </code></pre>