title: @media media query and ASP.NET MVC razor syntax clash
body: <p>I've got a large site that runs in ASP.NET MVC using the Razor view engine.</p>
  
  <p>I have a base stylesheet which contains all of the generic styling for the whole site.  On occasion, however, I have page specific styles which in the <code>&lt;head&gt;</code> of the page - usually this is one or 2 lines.</p>
  
  <p>I don't particularly like putting the CSS in <code>&lt;head&gt;</code> as its not strictly separation of concerns, but for one or two lines, that really is specific to that page, I prefer not have to attach another file and add to the bandwidth.</p>
  
  <p>I've got an instance though where I would like to put a page specific media query into the <code>&lt;head&gt;</code>, but because a media query uses the @ symbol and brackets {} it's clashing with the razor syntax:</p>
  
  <pre><code>@section cphPageHead{
       &lt;style&gt;
          /* PAGE SPECIFIC CSS */
          ...
  
          @media only screen and (max-width : 960px) &lt;-- the @ symbol here is clashing!
              {
                 ... }
              } 
      &lt;/style&gt;
  }  
  </code></pre>
  
  <p>Is there a way I can get around this?</p>