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

by

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?

3 Answers
3

Leave a Comment