5

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

这个设置的问题似乎是我在编辑我的LESS文件时得到了很多“未声明的变量”和“未声明的混合”，例如在base.less中添加一个名为@textColor的属性变量时，它在另一个less中声明名为 variables.less 的文件。有什么方法可以让 Web Essentials 了解外部 less 文件中定义的变量和 mixin？

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

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

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

4

1 回答 1

2

我无法就@mediaWeb Essentials 的问题给出答案，但我可以就变量和 mixins 问题给出建议。

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

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

于 2013-02-19T17:17:31.710 回答