使用条件注释共享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上只收到一个请求（它只加载一个样式表）。