title: Including @media queries as mixins with LESS
body: <p>Mixins with LESS are really simple:</p>
  
  <pre><code>.some-rules() {
    /* some rules */
  }
  .some-class {
    .some-rules;
  }
  </code></pre>
  
  <p>However, suppose I've got a ruleset within a media query, like:</p>
  
  <pre><code>@media (min-width: 800px) {
    .my_ruleset {
      /* more rules */
    }
  }
  </code></pre>
  
  <p>How can I include such a ruleset as a mixin?</p>
  
  <p>My motivation here is that I am using <a href="http://www.getbootstrap.com" rel="nofollow">Bootstrap</a>. I am trying to avoid semantically polluting my markup with its selectors, and would rather incorporate its rulesets as mixins. That's simple enough given the first example above, but I'm not sure how to incorporate the @media selectors.</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>Specifically, <a href="https://github.com/twbs/bootstrap/blob/master/less/grid.less" rel="nofollow">here is a summary of the code</a> I am trying to <strong>use</strong> as a mixin:</p>
  
  <pre><code>.container {
    .container-fixed();
  }
  
  // ...
  
  @media (min-width: @screen-sm) {
    .container {
      max-width: @container-sm;
    }
  
    // ...
  }
  
  @media (min-width: @screen-md) {
    .container {
      max-width: @container-md;
    }
  
    // ...
  }
  
  
  @media (min-width: @screen-lg-min) {
    .container {
      max-width: @container-lg;
    }
  
    // ...
  }
  </code></pre>