LESS @import&Web Essentials 2012

Question

在我的Web项目中,出于维护原因,我将CSS拆分为单独的LESS文件.我有一个名为config.less的文件作为主文件,使用@import指令导入其他较少的文件.

这个设置的问题似乎是我在编辑我的LESS文件时得到了很多"Undeclared variable"和"Undeclared mixin",例如在base.less中添加一个名为@textColor的属性变量,在另一个中声明了文件名为variables.less.有没有办法让Web要点知道变量和mixin是在外部较少的文件中定义的？

另一件似乎是绊倒Web Essentials的事情是当我使用LESS的嵌套媒体查询功能时:

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

嵌套的@media声明获得一个红色下划线,并且在悬停时它会在样式规则中显示"Unexpected'@'block".将嵌套的背景属性悬停显示"验证:'颜色'不是有效的HTML标记.

Answer 1

我无法给出有关 Web Essentials 问题的答案@media，但我可以就变量和 mixins 问题提供建议。

基本上，将您的config.less文件更改为 ，variables.less并将任何其他 mixin 文件更改为@import-once，然后将@import-once 'variables.less其添加到使用其中变量的每个文件中（对使用的任何 mixin 文件执行相同的操作）。

这样做的作用是，如果您正在处理该文件（例如您的base.less），则导入该文件，但是当所有文件都由 编译时config.less，它只会导入variables.less一次，而不会为每个也引用variables.less.