较少导入-参考与一次

Question

情况

我正在为开发人员（而不是一个开发人员）建立一个新网站建立一些框架。我当前的CSS设置使用以下LESS文件：

• grid.less
• mixins.less
• style.less
• template-home.less
• template-destination.less
• 其他模板专用文件

该文件将style.less导入所有内容：

@import "grid.less";
@import "mixins.less";
@import "template-home.less";
@import "template-destination.less";

解决方法

在我看来，这是一种非常明显且常见的方法-但是，如果我要在其中一个template-*文件中使用已定义的mixin ，则LESS无法编译该文件，因为NameError: .exampleMixin is undefined。

通读文档，似乎我有两个选择，这两个都涉及将my mixins.less导入可能使用它的每个模板文件中。我可以添加：

// either reference the file
@import (reference) "mixins.less";
// or use once
@import (once) "mixins.less";

题

我了解这些工具各自在做什么，但是每种工具都有什么优缺点？为什么我不能仅将mixins导入全局style.less并在其他每个包含的文件中使用它们？

Answer 1

为什么我不能只将mixins导入全局style.less并在其他每个包含的文件中使用它们？

此方法应该可以正常工作，没有任何编译错误。只有在您尝试不进行编译的template-*.less情况下mixins.less，它才会大惊小怪。如果您收到错误检查，请确保mixins.less正确的位置。

一次参考

我了解这些工具各自在做什么，但是每种工具都有什么优缺点？

一旦

一次的原理是只导入一次文件。例如，您可能mixins.less在template-*.less文件和中都有的导入styles.less。这样可以防止文件多次导入，从而导致样式表中的CSS样式重复。

值得注意的once是，实际上这是默认行为，import因此无需指定。

参考

参考是相当聪明的。如果使用参考导入，则在编译时将仅从导入的文件中输出已在无父文件中使用的样式。通常，这将用于混合类和扩展类。

例

//Mixins.less
.m-bacon {
   color: red;
}

.m-smokey {
   color: pink;
}

// Styles.less
@import (reference) mixins.less;

.pork {
    .m-bacon;
}

如果styles.less被编译，它将仅包含pork该类。

//Output
.pork {
    color: red;
}

摘要

总之，once可以防止多次生成相同的样式。这也是的默认行为@import。 reference防止未引用的mixin类并扩展在编译时生成的类。