Writing browser specific hack in Less (for <IE9)

Question

I want to do something like this (Source - CSS Tricks Article):

#veinte { color/*\\**/: blue\\9; }

in

Answer 1

Property name interpolation is possible with Less v1.6.0 and above. Hence this hack can be implemented as shown below:

@hack: ~"/*\**/";
#veinte { 
    color@{hack}: blue\9; 
}

Compiled CSS:

#veinte {
    color/*\**/: blue\9;
}

Answer 2

Are you including Modernizr or another shiv script that adds classes directly to the HTML element?

Thus something like this:

.selector {  
  ...rules...  

  .lte8 & {  
    ... < IE9 styles ...  
  }  
}  

Might suit your needs. (see: nesting selectors, using the &)

Otherwise, since you're being hacky anyway, why not just reference a different .less compiled output sheet in a conditional comment?

Answer 3

You can try this one: background-position:~"-150px 0px\9" width:~"300px\9";

example:

.test{
    width:~"300px\9";
}