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

css asp.net-mvc-3 razor media-queries
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

Related questions

CSS3 @font-face breaks Razor parser - can it remain inline via a workaround?

The CSS3 @font-face rule breaks a Razor section with the error message: CS0103: The name 'font' does not exist in the current context. It crashes at runtime. It seems the CSS3 @ character is the problem that causes the Razor parser …

Read More
jQuery DataTable overflow and text-wrapping issues

I have the following DataTable (full-width css class sets width = 100%) <table class="datatable full-width"> <thead> <th>LOB</th> <th>Creditor Line 1</th> <th>Creditor Line 2</…

Read More
Fieldsets with tables inside. How to put them on the same line?

I need to align two <fieldset> objects on the same line in partial view form. Whatever I do nothing helps. Trying to float them to the left, to the right, tried to minimize the width, tried display:inline …

Read More