title: Less CSS: Mixins with Variable Number of Arguments
body: <p>LESS allows parametric mixins, such as:</p>
  
  <pre><code>.transition(@property, @duration){
      transition:         @property @duration;
      -moz-transition:    @property @duration; /* Firefox 4 */
      -webkit-transition: @property @duration; /* Safari and Chrome */
      -o-transition:      @property @duration; /* Opera */
  }
  </code></pre>
  
  <p>However, this doesn't always work with properties such as transitions. If you are trying to have multiple transitions and attempt to call the mixin multiple times, the last mixin overrides all previously defined transitions. That's because the proper CSS3 syntax for defining multiple transitions is:</p>
  
  <pre><code>... {
      transition: @property1 @duration1, @property2 @duration2, ...;
  }
  </code></pre>
  
  <p>The only way that I can think of to define multiple transitions as mixins is to overload the mixin:</p>
  
  <pre><code>.transition(@property, @duration){...}
  .transition(@property, @duration, @prop2, @dur2){...}
  .transition(@property, @duration, @prop2, @dur2, @prop3, @dur3){...}
  </code></pre>
  
  <p>Is there a more robust and concise way of defining the transition mixin to take in a variable number of arguments and construct the appropriate transition CSS?</p>
  
  <p><em><strong>Context:</strong> Sometimes I'd like to transition on multiple properties; for example, a <code>:hover</code> might trigger transitions on background color, box-shadow, text-color, etc...</em></p>