使用条件注释共享LESS CSS变量

Question

我有一个LESS样式表styles.less,其中包含一些我需要在ie7.css样式表中访问的变量,这些变量是使用条件注释加载的.

鉴于这些是完全独立的样式表,并且考虑到我必须转换ie7.css为ie7.less,我是否可以在两个样式表中提供这些CSS变量？

即我希望能够做如下的事情:

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

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

Answer 1

这样做的最好方法是只使用两种不同的样式表:一种用于每个人,一种用于ie,其中包括每个人的样式.因此,在HTML中,使用智能条件注释,它看起来像:

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

在ie.less你可以导入styles.less:

@import url(styles.less);

/* Your styles for IE */

所以,你获得了两个好处:

1. 你从所有的变量styles.less在ie.less.
2. 你在IE上只得到一个请求(它只加载一个样式表).