title: Less/Meteor treating media queries as variables?
body: <p>I'm working with both Less and Meteor for the first time. Everything is very cool, except I'm stymied trying to get media queries to work. </p>
  
  <p>I have a series of media queries structured like this one:</p>
  
  <pre><code>/* Desktops and laptops ----------- */ 
  @media only screen  and (min-width : 1224px) {   
  @columns: 12;
    .full() {
      width: 100%;
    }
    .container(){
      .center(12);
    }
    .main-col() {
      .column(9);
      .push(0);
    }
    .side-col(){
      .column(3);
      float:right;
    }
    .nested-left-col(){
       .nested-left(6) 
     }
    .nested-right-col(){
       .nested-right(3);
    }
  }
  </code></pre>
  
  <p>But when the css is compiled, all I get is this:</p>
  
  <pre><code>/* Desktops and laptops ----------- */
  </code></pre>
  
  <p>Oddly, media queries that contain nothing but comments compile as expected:</p>
  
  <pre><code>@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Styles */
  }
  </code></pre>
  
  <p>I'm pretty sure that these media queries are being treated as variables that never get called. </p>
  
  <p>Am I simply doing it wrong? Is there something incredibly obvious that I'm missing? I've been searching for an answer for half an hour, but can't find anyone with the same issue. That kind of suggests that I'm missing the obvious, but maybe I have run into something unusual.</p>