Using the IE8 @media \0screen query in LESS

Question

In the CSS for an application I'm working on, I need to include some styling specifically for IE8. The style code is written in several LESS files and then compiled with either CodeKit or the LESS app on Mac OS X to a single CSS file that we use for the live application.

This is the CSS code I want to use in my LESS file:

@media \0screen {
  .thumbnail div img {
     width: 58px;
   }
}

However, LESS does not accept \0screen as valid code, and both CodeKit and the LESS app returns an error when trying to compile our LESS files with this code present.

I know we could use conditional comments and an alternative CSS file for IE8, but as the fixes required at this point only amount to a few lines, I would very much prefer to use the @media query and keep the compiled CSS to one file.

On the LESS website, there is a short chapter on escaping code using ~"", but it seems it only applies to values.

The query and CSS code within works perfectly for IE8 if I put it straight into the compiled CSS file, but obviously I don't want to have to append the compiled CSS after every time I compile it.

Is there another way to escape this query in LESS?

Answer 1

Following the tip grimmus posted as a comment, I managed to solve this by creating a LESS variable and then using that variable in the @media query.

I put this in my variables:

@ie8: \0screen;

And then in the query:

@media @ie8 {
  .thumbnail div img {
    width: 58px;
  }
}

Works like a charm! Props to grimmus for the suggestion.