少导入 - 参考vs一次

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。< / p>

通过阅读文档，我看来有两个选项，这两个选项都涉及将mixins.less导入每个可能使用它的模板文件。我可以添加：

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

问题

我明白这些是做什么的，但是什么是专业人士和每个人的利弊？为什么我不能将mixin导入全局style.less并在每个其他包含的文件中使用它们？

Answer 1

  

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

此方法应该可以正常运行而不会出现任何编译错误。只有当您尝试编译template-*.less而没有mixins.less时，它才会大惊小怪。您收到错误，检查mixins.less的位置是否正确。

一次和参考

  

我明白这些是做什么的，但是什么是专业人士和每个人的利弊？

一旦

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

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

参考

参考非常聪明。如果使用引用导入，则在编译时，它将仅从导入文件中输出已在parent less文件中使用的样式。通常，这将用于mixin类和扩展类。

示例

//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类并扩展在编译时生成的类。