title: Stylus: how to create a CSS variable with a Mixin interpolation
body: <p>How can a Stylus Mixin interpolate for both sides of the definition of a variable, such as:</p>
  <pre><code>--MyVariable: MyVariable
  </code></pre>
  <p>In the compiled CSS, <code>--MyVariable</code> should remain as the variable name, whereas the second variable should be the numerical value computed for this Stylus variable defined elsewhere.</p>
  <p>I will have many such pairs of a CSS variable and a Stylus variable. Now, even though I could just manually write them down in the Stylus file, I would like to have a Mixin that allows me to create them by writing the shared part of the names just once as the Mixin's single argument, such as:</p>
  <pre><code>VariablePair(MyVariable-1) // --MyVariable-1: MyVariable-1
  VariablePair(MyVariable-2) // --MyVariable-2: MyVariable-2
  VariablePair(MyVariable-3) // --MyVariable-3: MyVariable-3
  </code></pre>
  <p>I tried:</p>
  <pre><code>VariablePair(VariableName)
    --{VariableName}: VariableName
  
  VariablePair(MyVariable)
  </code></pre>
  <p>It didn't parse.</p>
  <p>I realized that <code>MyVariable</code> without <code>''</code> would come as an actual value that couldn't be affixed to <code>--</code>. But, adding <code>''</code> to it as <code>VariablePair('MyVariable')</code> would result in the right side of the definition itself becoming a string instead of the Stylus variable for computation.</p>
  <p>I tried the different combinations of the presence/lack of the brackets and <code>''</code> and <code>$</code> as well as concatenations, but none of them seem to work. <code>'--' + VariableName + ': ' + VariableName</code> (with/without the brackets/<code>$</code>) isn't working, it either doesn't parse or does parse but without creating a line in the compiled CSS.</p>
  <p>Is there a solution to this?</p>