按需导入LESS文件

时间:2013-01-19 14:58:20

标签: css less

简短:是否有可能“按需”导入较少的文件,只有在尚未定义函数/变量时?

LONG:我们假设我的LESS文件包含我的页面样式。我们称之为styles.less。另外,我还有5个LESS文件。那里的每个人都包含通用设计原语,例如我在许多项目中使用的信息框的设计 - 这就是它没有被合并到styles.less的原因。我们假设它被称为.infobox {} 那么,在.infobox中找不到styles.less时,是否有可能“尝试”导入该5个文件?我对通过lessc(节点模块)和web浏览器中的“动态”编译进行编译感兴趣。

我希望我的例子足够澄清情况 - 如果没有,请随时发表评论,我会编辑问题以提供更多信息。

1 个答案:

答案 0 :(得分:1)

我无法找到使其完全自动化的方法。我也不知道您是否希望使用此功能以减少@import请求或简单地减少最终CSS以不加载它不需要的项目。

如果您不需要它完全自动化,并且您只是想减少生成的CSS,并且您没有太多的课程,那么您可以执行此操作,那么您可以执行以下操作: styles.less档案。

//have at the top of the file some variables set to 0 or 1 if the class
//is present or absent in that file
@usesClass-infobox: 0;

//set up a mixin to load it if NOT in the file
.setClass-infobox(@set) when (@set = 0) {
  @import 'infobox.less'; 
}

//a default mixin to do nothing otherwise
.setClass-infobox(@set) {}

//call the mixin
.setClass-infobox(@usesClass-infobox);

当然,这并不能真正帮助实现流程自动化。毕竟,如果您知道.infobox文件中没有styles.less,那么您只需添加@import,无需任何额外的mixin进行检查。它给出的唯一真正价值是它设置了一段变量,基本上告诉编码器“嘿,如果你不在这里包含它,可以加载这个功能的模块;所以告诉我,你是否包括它?“

同样,我不确定这是否完全解决了你的目标。我提供它,因为它在某些情况下可能对某些人有用。