LESS @import & Web Essentials 2012

Question

在我的网页项目中，由于维护原因，我将CSS分成了独立的LESS文件。我有一个名为config.less的文件作为主文件，它使用@import指令导入其他less文件。

但是这个设置的问题似乎是，在编辑LESS文件时，我会遇到很多"未声明的变量"和"未声明的mixin"错误，例如在base.less中添加一个称为@textColor的属性变量，在另一个叫variables.less的less文件中声明。有没有办法让Web Essentials意识到在外部less文件中定义的变量和mixin？

另一个似乎使Web Essentials出现问题的是当我使用LESS的嵌套媒体查询特性。

.some-selector {
    background: #000;
    @media only screen and (max-width: 800px) {
        background: #fff;
    }
}

嵌套的@media声明会出现红色下划线，并且在悬停时显示“样式规则中意外的'@'块”。悬停在嵌套的背景属性上会显示“验证：'color'不是有效的HTML标签。”

- Unless

Answer 1

关于Web Essentials的@media问题，我不能提供答案，但我可以就变量和mixin问题提供建议。

基本上，将您的config.less文件更改为@import-once，以使variables.less和任何其他mixin文件都被包含进去，并且在使用其中变量的每个文件中（对于使用的任何mixin文件都要这样做）也要添加@import-once 'variables.less'。

这样做的效果是，在您正在编写的文件（如您的base.less）中导入文件，在config.less编译所有文件时，它只会导入variables.less一次，而不会再为每个引用variables.less的文件重新导入它。

- ScottS

---

由于某些原因，import-once对我不起作用。 我有一个主style.less文件，其中仅包含导入。从那里，我import-once一个mixin.less文件，该文件声明了一个.clearfix类，并且该类像应该的那样被包含...很好。现在在另一个文件中，我也import-once mixin.less文件以获得智能提示，然后将该文件import-once到主style.less中。 我认为它只应该包括.clearfix类一次，但不幸的是它包括两次？ 有什么想法吗？ - MattyP

谢谢@ScottS！这正是我想要的。本应该更全面地阅读LESS文档 :) 根据文档，从版本1.4.0开始，@import的默认行为将是@import-once。 - Unless

@MattyP：那个style.less听起来像是我的config.less文件的等价物。在这种情况下，我们似乎有相似的设置。所以编译后的style.less文件包含了两次.clearfix类？ - Unless

@MattyP：我没有一个明确的答案。关于@import和@import-once的行为仍有很多讨论，这些问题可能会在1.4.0版本中得到解决。我只能说根据你所说的情况，你不应该看到两个.clearfix类，但如果你确实看到了，那么可能还有其他问题，可能是另一个错误。 - ScottS

@除非是这样，否则import-once并不能解决我的问题......我正在使用Visual Studio和Web Essentials（现在是Web工具）来支持less，但它似乎确实导入了两次。 :( - MattyP