title: Dynamically define a variable in LESS CSS
body: <p>I am trying to create a mixin that dynamically defines variables in LESS CSS, by actually assigning them a composite name.</p>
  
  <p>The simplified use-case (not the real one):</p>
  
  <pre><code>.define(@var){
      @foo{var}: 0;
  }
  </code></pre>
  
  <p>Then one would call the mixin as such:</p>
  
  <pre><code>.define('Bar'){
      @fooBar: 0;
  }
  </code></pre>
  
  <p>Since this kind of string interpolation is possible while using selectors names, I was wondering if the same would be possible for variable names; so far, I have had no luck with various syntaxes I tried (other than the above, I tried escaping, quoting, using the <code>~</code> prefix and so on).</p>
  
  <h2>Edit</h2>
  
  <p>I just tried one more thing, and I feel I might be close; but I am experiencing an oddity of the LESS syntax. If I write this:</p>
  
  <pre><code>.define(@var){
      #namespace {
           @foo: @var;
      }
  }
  </code></pre>
  
  <p>And then call it like so:</p>
  
  <pre><code>.define(0)
  </code></pre>
  
  <p>I can then use <code>@foo</code> in the usual <em>namespaced</em> fashion:</p>
  
  <pre><code>.test {
       #namespace;
       property: @foo; /* returns 0 */
  }
  </code></pre>
  
  <p>However, the same doesn't apply in the case of a string-interpolated selector:</p>
  
  <pre><code>.define(@var, @ns){
      #@{ns} {
           @foo: @var;
      }
  }
  
  .define(0, namespace);
  
  .test {
       #namespace;
       property: @foo;
  }
  </code></pre>
  
  <p>The above code gives me the following error:</p>
  
  <blockquote>
    <p>Name error: #namespace is undefined</p>
  </blockquote>
  
  <p>However, the string interpolation was successful and valid. As a matter of fact, if I take away the <code>.test</code> part and modify the above to output a test property, I can see that the CSS is parsed correctly. I mean:</p>
  
  <pre><code>.define(@var, @ns){
      #@{ns} {
           @foo: @var;
           prop: @foo;
      }
  }
  
  .define(0, namespace);
  </code></pre>
  
  <p>Outputs the following CSS:</p>
  
  <pre><code>#namespace {
      prop: 0;
  }
  </code></pre>