Question

I have a LESS stylesheet styles.less with some variables that I need to access in my ie7.css stylesheet, which is loaded using conditional comments.

Given that these are entirely separate stylesheets, and given that I would have to convert ie7.css to ie7.less, is it possible for me to make these CSS variables available across the two stylesheets?

i.e. I would like to be able to do something like the following:

# styles.less, always loaded
@labelwidth: 150px;

# ie7.less, sometimes loaded
label{ margin-left: @labelwidth; }

Answer 1

The best way of doing so is to use only two different stylesheets: one for everyone and one for ie, which includes the everyone’s. So, in HTML, using smart Conditional Comments it would look like:

<!--[if gt IE 7]><!-->
    <link rel="stylesheet" href="styles.less" />
<!--<![endif]--><!--[if lt IE 8]>
    <link rel=stylesheet href="ie.less">
<![endif]-->

And in ie.less you can import styles.less:

@import url(styles.less);

/* Your styles for IE */

So, you gain two benefits:

1. You get all the variables from styles.less in ie.less.
2. You get only one request on IE (it loads only one stylesheet).