5

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?

vtamm
  • 342
  • 1
  • 11
  • 3
    I experienced something along the lines of what you mention using Sass.It wouldn't parse the \0/ IE8 specific style so defining this in a variable worked instead `$hack_ie8:"\0/";` and then in the style `line-height:22px#{$hack_ie8};` – grimmus Oct 15 '13 at 08:26
  • 3
    I answered a very similar question here: http://stackoverflow.com/questions/17699588/viewport-media-and-less/17699986#17699986 – Martin Turjak Oct 15 '13 at 09:33

1 Answers1

7

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.

Community
  • 1
  • 1
vtamm
  • 342
  • 1
  • 11