@media media query and ASP.NET MVC razor syntax clash

Sniffer picture Sniffer · Aug 11, 2011 · Viewed 81.5k times · Source

I've got a large site that runs in ASP.NET MVC using the Razor view engine.

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 <head> of the page - usually this is one or 2 lines.

I don't particularly like putting the CSS in <head> 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.

I've got an instance though where I would like to put a page specific media query into the <head>, but because a media query uses the @ symbol and brackets {} it's clashing with the razor syntax:

@section cphPageHead{
     <style>
        /* PAGE SPECIFIC CSS */
        ...

        @media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
            {
               ... }
            } 
    </style>
}  

Is there a way I can get around this?

Answer

archil picture archil · Aug 11, 2011

use double @@ symbols. That will escape @ symbol and render @media correctly on client side