Question

我是LESS的新手，我正在尝试为我的LESS文件创建一个复杂的结构，因此我可以将前端框架文件与我的平台文件从客户端特定的更改中分离出来....所以为此我有一个结构使用@import＆＃34; filename.less＆＃34 ;;像这样（全部分成子文件夹....）

master.less > platform.less > bootstrap.less > variables.less
                                             > mixins.less
                                             > ............etc

                            > font-awesome.less > ........etc

                            > bootstrap-ui.less > ........etc

                            > platform-variables.less
                            > platform-mixins.less
                              ......... etc

            > site.less > site-variables.less
                          ...............etc..
                          random-page.less

好的，所以master.less有一个导入platform.less和site.less等....

我的问题为什么我能够在random-page.less中使用mixins.less文件中定义的mixin ....但是无法在random-page.less中使用我的自定义mixin文件中定义的mixins（ platform-mixins.less）从platform.less文件调用我非常困惑....请指教。

我收到的错误是：

>> NameError: .no-padding is undefined in css/site/random-page.less on line 75, column 3:
>> 74   .footer-sidebar {
>> 75           .no-padding;
>> 76   }

这是真的，因为它不存在于此文件中？然而，尽管此文件中没有明确的修复mixin / class，但bootstrap标准mixin按预期工作... .footer-sidebar { .clearfix; }

这是SASS或Stylus等等解决的LESS问题请告知。

Answer 1

为了理解你的结构我创建了五个文件如下：

master.less：

-

.master {master:1;}
@import "site";
@import "platform";

platform.less

-

.platform {platform:1;}
@import "platform-mixins.less";

平台mixins.less

-

.platform-mixins {platform-mixins:1;}
.platform-mixin() {color: red;}

随机page.less

-

.random-page {
.platform-mixin()
}

site.less

-

.site {site:1;}
@import "random-page";

之后我运行lessc master.less，输出以下CSS代码：

.master {
  master: 1;
}
.site {
  site: 1;
}
.random-page {
  color: red;
}
.platform {
  platform: 1;
}
.platform-mixins {
  platform-mixins: 1;
}

如预期的那样，来自platform-mixins.less的.platform-mixin（）可以在random-page.less中无错误地调用。因此，请确保您的mixin存在并且您确实导入了您提到的文件。

较少的编译错误Mixin undefined

1 个答案: