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?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments