Question

我想从另一个较少的文件中导入所有样式，但是要进入有限的范围。我正在尝试这个：

“我的-site.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

根据css-spec，@import - 声明必须先于css文件中的所有其他声明。因此，规则中的@import预计会失败。我想文件末尾的@import没有失败是浏览器供应商的善意。

我想LESS会遵守相同的规则。

编辑：问题是，你为什么要把这些风格作为范围？通过适当的声明，这不是必要的。

Answer 3

时代变了。现在您的第一个代码片段将起作用。

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

Answer 4

LESS（和CSS）的语法不允许@imports进入CSS规则。尝试使用 namespace ：

.styles {
    [your code]
}

然后，替换名称空间的@import ：

.wrapper-class {
    .styles;
}

参考：