css - @viewport, @media and LESS -

i've converted css less use .net application (i using dotless .net, http://www.dotlesscss.org/ compile less @ runtime).

the compiler falling down on these 2 blocks of code:

@viewport {   width: device-width; } /* add min-width ie 8 , lower */ @media \0screen\,screen\9 {     body {         min-width: 960px;     } } 

just reference, media query above hacky way of targeting ie

how can "less-ify" these blocks of code?

in less >= 1.4.0 can define variable , use in media query:

@iehack: \0screen\,screen\9;  @media @iehack {     body {         min-width: 960px;     } } 

in older versions of less (<=1.3.3) might want use string string interpolation in variable:

@iehack: ~'\0screen\,screen\9'; 

this should give desired output.

but if want go hacky way in css can go hacky way in less too:

@themedia: ~"@media \0screen\,screen\9 {"; @aftermedia: ~"} after"; @{themedia} {     body {         min-width: 960px;     } } @{aftermedia}{/*just add closing bracket media*/} 

where inject media query around normal role, generates selector @ end of media block, can use useful well, technique might used in more exciting instances media queries ... wanted mention it.

in case css output like:

@media \0screen\,screen\9 {  body {   min-width: 960px; } } after {   /*just add closing bracket media*/ }