title: Can I use mixins to generate new mixins in LESS?
body: <p>I'm trying to use LESS to dynamically generate a set of mixins that would help me write cleaner media query code. So far in my limited knowledge of the language I've put together code that looks like this: </p>
  
  <pre><code>@sizes: xxs, xs, sm, md, lg;
  
  .mediaQueries(@iterator:1) when(@iterator &lt;= length(@sizes)) {
  
      //Extract name
      @sizeName: extract(@sizes, @iterator);
  
      //Attempt to build min-width query 
      .MQ-min-@{sizeName} (@content) {
        @media (min-width: @screen-@{sizeName}) {
          @content();
        }
      }
  
      //Attempt to build max-width query 
      .MQ-max-@{sizeName} (@content) {
        @media (max-width: @screen-@{sizeName}) {
          @content();
        }
      }
  
      .mediaQueries((@iterator + 1));
  }
  .mediaQueries();
  </code></pre>
  
  <p>The goal is to have a set of mixins that would allow me to easily and cleanly define some CSS properties for a specific breakpoint, like so: </p>
  
  <pre><code>.generic-class {
    background: black;
    //Sizes @screen-sm and up 
    .MQ-min-sm({ 
      background: transparent;
    })
  }
  </code></pre>
  
  <p>It doesn't work. Something to note, I'm trying to interpolate the size name into a variable name that would then output me a the <code>px</code> value of that variable into the <code>@media</code> query. Is something like this even possible? </p>
  
  <p>Otherwise my compiler currently breaks on the start of the nested mixin (<code>.MQ-min-@{sizeName} (@content) {</code>) with the error: </p>
  
  <p><code>Potentially unhandled rejection [2] Missing closing ')' in file ../mixins.less line no. 43</code></p>
  
  <p>Is something like what I'm trying to achieve possible? </p>