@在有限范围内导入较少的文件

Question

我想从另一个 less 文件导入所有样式，但范围有限。我正在尝试这个：

“我的网站.less”

.wrapper-class {
    @import "path/to/styles.less";
}

但这根本不起作用。我使用基于浏览器的 less.js 选项，并且可以看到实际执行导入时运行的 GET 语句。但生成的 CSS 不包含其他工作表中的任何样式。如果我这样做，它会起作用：

.wrapper-class 
{
    /* ... */
}
@import "path/to/styles.less";

但这违背了最初的目的。那么有什么方法可以在 Less 中进行像这样的有限范围的 @import 吗？谢谢！

Answer 1

自从这个问题被发布并得到回答以来，预处理器已经实现了 @import 和范围。现在可以在 LESS、SASS 和 Stylus 中使用。

示例：

.lt-ie9 {
  @import "ie8-fixes";
}

Answer 2

时代变了。现在你的第一个代码片段就可以工作了。

.wrapper-class {
    @import "path/to/styles.less";
}

Answer 3

根据 css-spec，

@import

声明必须位于 css 文件中所有其他声明之前。因此，规则内的

@import

预计会失败。我想文件末尾的

@import

没有失败是浏览器供应商的善意。

我想 LESS 也会遵守同样的规则。

编辑：问题是，为什么要对这些样式进行范围限制？通过适当的声明，这应该是没有必要的。

Answer 4

LESS（和 CSS）的语法不允许

@imports

进入 CSS 规则。尝试使用命名空间：

.styles {
    [your code]
}

然后，将

@import

替换为 命名空间：

.wrapper-class {
    .styles;
}

参考：