Less hack background-image for IE8 - css

Question

I want to set different background image for IE8 with Less, as it doesn't support background-size.
I have searched in Google about IE8 hacks and the result is writing code like this height: 300px\9;, ending with \9.
I have tried this, but I find it doesn't support background-image setting.
If I write like this
.backgroundImage(#url) {
background-image: url('#{base_url}#{url}.png');
background-image: e("url('#{base_url}x/#{url}.png')\9");
}
#demo {
.backgroundImage('large_cloud');
}
,
the Less compiler gives an error, and if I set height: 300px\9; like this, the compiler doesn't show any errors.
So, I'm very confusing. How to use Less hack for setting background-image in IE8.

Answer 1

Less is written to be compatible with proper CSS and so it may not always work properly when used for hacks. While some hacks like the height and color (in the thread linked below) may work, it is not a guarantee that all would work. If you need values with hacks to compile properly then it is safe to do CSS escaping for the value like below:
#demo{
background-image: ~"url('myimage-400px.png')\9";
}
or as
#demo{
background-image: e("url('myimage-400px.png')\9");
}
The above solution is purely one for the Less compiler error and I don't have much idea if that actually works in IE8 or not. If that method does not work then you may want to have a look at the options that are suggested in this SO thread.
Note: This question is similar to this one but it is not the same because that is about property name interpolation whereas this one is more about values.

Answer 2

You should avoid hacks altogether. Instead, conditionally serve a stylesheet to IE 8 users that addresses the version-specific issues you're facing.
<link href="styles.css" rel="stylesheet" />
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" /><![endif]-->
Relying upon syntactic quirks often causes unintended side-effects, and generally come with a larger affected scope than advertised. Conditional Comments, on the other hand, are inherently designed to apply version-specific instruction.

Answer 3

Here's the technique I use and the trick to getting it to compile when writen in LESS.
1) write your background css for older browsers that doesn't include the background-size property.
eg: background:transparent url(/img/path-to-image-ie8.png) 0% 0% no-repeat;
2) write your background css for modern browsers that does include the background-size property. eg: background:transparent url(/img/path-to-image.png) 0% 0%/100% auto no-repeat;
Old browsers wont recognise the second line and will ignore it, modern browsers will overwrite the first line with the second.
The trick to getting it to compile in LESS is to write the / like this:
background:transparent url(/img/path-to-image.png) 0% 0%~"/"100% auto no-repeat;