title: Fancy Media Queries with some LESS Magic
body: <p>It would be nice to wrap css-styles for different resolutions within some css-classes using less.</p>
  
  <p>I'd like to do something like:</p>
  
  <pre><code>footer {
    width: 100%;
  }
  
  .tablet {
    footer {
      width: 768px;
    }
  }
  
  .desktop {
    footer {
      width: 940px;
    }
  }
  </code></pre>
  
  <p>At the end something like this should be the result:</p>
  
  <pre><code>footer {
    width: 100%;
  }
  
  @media screen and (min-width: 768px) {
    footer {
      width: 768px;
    }
  }
  
  @media screen and (min-width: 992px) {
    footer {
      width: 940px;
    }
  }
  </code></pre>
  
  <p>.tablet could look somehow like this:</p>
  
  <pre><code>@media screen and (min-width: 768px) {
    .tablet {
  
    }
  }
  </code></pre>
  
  <p>Hope somebody has a nice idea!</p>