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?

Answer 1

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.