title: How to pass multiple class names to a mixin in LESS
body: <p>I'm making a view that displays transactions on an account, and I want to colour-code the transaction type/state. I also want to show a legend explaining the colour codes.</p>
  
  <p>I want an end result that's structured like this:</p>
  
  <h3>HTML</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table id="transactions"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th colspan="2"&gt;
          Transactions
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="credit"&gt;
        &lt;td&gt;A credit&lt;/td&gt;
        &lt;td&gt;$1.00&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="debit paid"&gt;
        &lt;td&gt;A paid debit&lt;/td&gt;
        &lt;td&gt;($2.00)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="debit unpaid"&gt;
        &lt;td&gt;An unpaid debit&lt;/td&gt;
        &lt;td&gt;($3.00)&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;hr/&gt;
  &lt;table id="legend"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th colspan="3"&gt;
          Legend
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="credit"&gt;Credit&lt;/td&gt;
        &lt;td class="debit paid"&gt;Paid&lt;/td&gt;
        &lt;td class="debit unpaid"&gt;Unpaid&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre class="lang-css prettyprint-override"><code>table#transactions &gt; tbody &gt; tr.credit {
    color: limegreen;
  }
  
  table#legend &gt; tbody &gt; tr &gt; td.credit {
    color: limegreen;
  }
  
  table#transactions &gt; tbody &gt; tr.debit.paid {
    color: goldenrod;
  }
  
  table#legend &gt; tbody &gt; tr &gt; td.debit.paid {
    color: goldenrod;
  }
  
  table#transactions &gt; tbody &gt; tr.debit.unpaid {
    color: crimson;
  }
  
  table#legend &gt; tbody &gt; tr &gt; td.debit.unpaid {
    color: crimson;
  }
  </code></pre>
  
  <p><sub><a href="http://codepen.io/anon/pen/EiBFe" rel="nofollow">(CodePen)</a></sub></p>
  
  <p>Note that the "debits" use two class names, to tell them apart from the credits. </p>
  
  <p>Clearly there's a bit of redundancy there, which I tried to refactor into this (invalid) LESS code:</p>
  
  <pre class="lang-css prettyprint-override"><code>.transaction-status(@class, @color) {
    table#transactions &gt; tbody &gt; tr@{class} {
      color: @color;
    }
  
    table#legend &gt; tbody &gt; tr &gt; td@{class} {
      color: @color;
    }  
  }
  
  .transaction-status(.credit, limegreen);
  .transaction-status(.debit.paid, goldenrod);
  .transaction-status(.debit.unpaid, crimson);
  </code></pre>
  
  <p>A possible workaround would be to rejigger things so the different transaction types have a single unique class name but that feels like time travelling to the time of IE6. I.e. I'm aware of, but would like to avoid this valid LESS, which seems so close, and yet so far:</p>
  
  <pre class="lang-css prettyprint-override"><code>.transaction-status(@class, @color) {
    table#transactions &gt; tbody &gt; tr.@{class} {
      color: @color;
    }
  
    table#legend &gt; tbody &gt; tr &gt; td.@{class} {
      color: @color;
    }  
  }
  
  .transaction-status(credit, limegreen);
  .transaction-status(debit-paid, goldenrod);
  .transaction-status(debit-unpaid, crimson);
  </code></pre>
  
  <p>I tried quoting the class names, but even though that makes the first LESS sample compile, the quotes are passed to the output CSS. So, is there a way to pass something else than an "identifier" as a parameter to a LESS mixin, and have it work in selector interpolation correctly?</p>