title: LESS CSS: Reuse generated .@{name} class as a mixin
body: <p>I'm using LESS CSS 1.3.3. Sorry if this question has already been asked, I didn't find anything relevant on the web.</p>
  
  <p>I have several class generators that look like this (example extremely simplified, just enough to trigger the error):</p>
  
  <pre><code>#genMarginTop (@name, @size) {
      .@{name} { margin-top: @size; }
  }
  </code></pre>
  
  <p>Then I use them to generate some actual classes:</p>
  
  <pre><code>#genMarginTop(mtStandard, 40px);
  #genMarginTop(mtHalf, 20px);
  </code></pre>
  
  <p>So far, so good, LESS correctly generates those classes and I can use them in the HTML.
  However when I want to reuse such a generated class as a mixin somewhere else, I get an error:</p>
  
  <pre><code>.someClass {
      .mtStandard; // won't work, see error below
      // more stuff
  }
  </code></pre>
  
  <p>The error I get is:</p>
  
  <pre><code>NameError: .mtStandard is undefined in /.../example.less:161:4
  160 .someClass {
  161     .mtStandard;
  162     // more stuff
  </code></pre>
  
  <p>Of course I try to use the mixin <em>after</em> the class has been generated. It <em>looks like</em> LESS somehow won't register such generated classes internally after it generates them, but I could well be wrong.</p>
  
  <p><strong>Is there a way to reuse such generated classes as mixins in other classes?</strong> Being quite new with LESS, and their documentation being rather sparse about generated classes, I'm at a total loss (especially since this is the only syntax that seems to be accepted for mixins).</p>
  
  <p>Thanks for reading me.</p>
  
  <hr>
  
  <p><strong>Note:</strong> The reason why I use such class generators is because they are much more complex than the example above (think nested classes that all depend on a common set of parameters), and I'm embedding the generated classes in various <code>@media</code> queries to support any device type in a "Zen" fashion. In the end I get something like:</p>
  
  <pre><code>@media (max-width: 1024px) {
      #genSomething(something, somethingParam1, ...);
      #genSomething(somethingElse, somethingElseParam1, ...);
      #genStuff(stuff, stuffParam1, ...);
  }
  @media (max-width: 240px) {
      #genSomething(something, somethingParam2, ...);
      #genSomething(somethingElse, somethingElseParam2, ...);
      #genStuff(stuff, stuffParam2, ...);
  }
  // etc
  </code></pre>
  
  <hr>
  
  <h1>Solution / test case</h1>
  
  <p>Here's a test case for @MartinTurjak 's solution, I can confirm that this works as expected, nested classes and everything:</p>
  
  <pre><code>.explicit {
    margin-top: 1;
    input { margin-top: 1; }
  }
  .reuseExplicit {
    .explicit;
    margin-bottom: 1;
  }
  #generator (@arg) {
    margin-top: @arg;
    input {
      margin-top: @arg;
    }
  }
  .generated { #generator(1); }
  .reuseGenerated {
    .generated;
    margin-bottom: 1;
  }
  </code></pre>
  
  <p>Which correctly generates: (notice how explicit/generated yield the very same result)</p>
  
  <pre><code>.explicit {
    margin-top: 1;
  }
  .explicit input {
    margin-top: 1;
  }
  .reuseExplicit {
    margin-top: 1;
    margin-bottom: 1;
  }
  .reuseExplicit input {
    margin-top: 1;
  }
  .generated {
    margin-top: 1;
  }
  .generated input {
    margin-top: 1;
  }
  .reuseGenerated {
    margin-top: 1;
    margin-bottom: 1;
  }
  .reuseGenerated input {
    margin-top: 1;
  }
  </code></pre>