title: CSS pre-processor with a possibility to define variables in a @media query
body: <p>Currently, I am using LESS as my main CSS pre-processor. I have (and I am sure a lot of people have this need) to define variables in a <code>@media</code> query like:</p>
  
  <pre><code>@media screen and (max-width: 479px) {
      myVar: 10px;
  }
  @media screen and (min-width: 480px) and (max-width: 767px) {
      myVar: 20px;
  }
  @media screen and (min-width: 768px) {
      myVar: 30px;
  }
  
  .myElement {
      padding: @myVar;
  }
  </code></pre>
  
  <p>This doesn't work in LESS, because of the compiling nature (<code>@myVar</code> is defined within a scope of each particular <code>@media</code> only, but not globally). Even if I define <code>@myVar</code> globally before the media queries, it is not updated in accordance to the media queries and <code>.myElement</code> gets that initial value no matter what.</p>
  
  <p>So, the question is, is it possible to achieve this in any other CSS pre-processor, or we are doomed to override the <code>.myElement</code> within each media query? Not a problem in this simplest example, but in real projects this could save a lot of time and copy/pasting.</p>
  
  <p><strong>EDIT:</strong>
  Not a solution, but a <strong>workaround</strong> for my particular project:</p>
  
  <ol>
  <li>Set font-size on <code>&lt;html&gt;</code> to base font-size</li>
  <li><code>myVar</code> LESS variable is defined in <a href="http://www.w3.org/TR/css3-values/#font-relative-lengths"><code>rem</code></a> instead of <code>px</code> as a derivative of the base font-size</li>
  <li>Use <code>@media</code> queries to adjust base font-size for different media.</li>
  <li><strong>OPTIONAL</strong> Use <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM unit polyfill</a> for browsers, that don't yet support <code>rem</code> (<a href="http://caniuse.com/#search=rem">http://caniuse.com/#search=rem</a>). This will not work in IE 8 and below, but not because of lack of support for <code>rem</code> – <a href="http://caniuse.com/#feat=css-mediaqueries">it doesn't support media queries</a>. So IE8 and below get full-size media-queries-free stylesheet anyway.</li>
  </ol>
  
  <p>Code snippet:</p>
  
  <pre><code>@myVar: .77rem; // roughly 10px, 20px and 30px respectively
  
  html { font-size: 13px }
  @media screen and (min-width: 480px) and (max-width: 767px) {
      html { font-size: 26px }
  }
  @media screen and (min-width: 768px) {
      html { font-size: 39px }
  }
  
  .myElement {
      padding: @myVar;
  }
  </code></pre>
  
  <p>Here is a <a href="http://jsbin.com/avigot/11/edit">JSBin</a> with more extensive example that mixes different font-size elements with differently measured blocks.</p>
  
  <p>Easy and flexible for my needs. Hopefully will be helpful for somebody else.</p>