IE Conditionals Causes .LESS error

Question

I having an issue with LESS processing a file that has IE conditionals. For example I have a normal .less file and the last lines in the file are as follows.

<!--[if IE ]>
   * .columncontainer {
      margin: 10px auto !important;
   }
<![endif]-->

With LESS debugging on I get a simple "Syntax error on line number 2781". That line number is the first line of the conditional above.

Any ideas?

Are you putting the conditionals in the head of the document? — Santiago Baigorria, May 10 '13 at 17:11
Do you really need those IE-specific styles? Which IE versions are you targetting? Perhaps there's an alternative solution that doesn't involve using IE conditionals at all. — Spudley, May 10 '13 at 20:02
I agree with Spudley here, there might be better ways of doing this than using the conditional comments. However, I included some links in my answer where you can read more about those, it might help to grasp the idea better. You may also finding useful what Paul Irish wrote on targeting specific IEs in CSS: here http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ or here http://paulirish.com/2009/browser-specific-css-hacks/. — Martin Turjak, May 10 '13 at 20:35

score 3 · Accepted Answer · edited May 23 '17 at 12:03

It looks like you are putting the above code into the style sheet, do I get this right?

This type of condition is not acceptable CSS (or LESS) syntax .. if you want to use this condition you have to do it in the html file - overriding the formatting in the CSS/LESS file ... by doing something like this:

<!--[if IE]>
    <style type='text/css'>
        * .columncontainer {
            margin: 10px auto !important;
        }
    </style>
<![endif]-->

or calling another style sheet (or less file), dunno - something like this:

<!--[if IE]>
    <link ... />
<![endif]-->

You can read more on conditional comments here or here

or you can also find IE specific styling solutions in LESS ... here is something written about it, and you can probably find loads more on IE-targeting selectors into your CSS or LESS instead of using separate style sheets.

IE Conditionals Causes .LESS error

1 Answers1