通过条件注释共享 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. 您可以获得所有来自 ie.less 中 styles.less 的变量。
2. 您在 IE 上仅收到一个请求（它仅加载一个样式表）。