Question

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

这个设置的问题似乎是我得到了很多“未声明的变量”＆amp;编辑我的LESS文件时“未声明的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的文件。