1

在我当前的项目中，icnludes 的索引中有以下结构：

...

<link rel="stylesheet/less" type="text/css" href="css/master.less" media="screen" />

<!--module source CSS-->
<link rel="stylesheet/less" type="text/css" type="text/css" href="module/A/css/A.less" media="screen" />
<link rel="stylesheet/less" type="text/css" href="module/B/css/B.less" media="screen" />

...

在我的 master.less 中，我包含了其他 less 文件，例如 mixin.less。在这个文件中，我有很多可以正常工作的声明 - 经过测试。

但是如果我尝试在我的模块 B.less 中使用像 .gradient 这样的 mixin，我会变成这样的错误： .gradient is undefined

放置在 mixin.less 中的梯度混合完全可以：

.gradient (@startColor: white, @endColor: #eee) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: -ms-linear-gradient(top, @startColor, @endColor);
    background: -o-linear-gradient(top, @startColor, @endColor);
}

当我直接在我的 B.less 中使用这个 mixin 时，它可以工作。所以我很困惑。我将客户端部分与 less.js 一起使用，并已阅读http://lesscss.org/上的 fkn 手册，但我不知道出了什么问题。

文件已正确加载等这里有什么问题？

4

1 回答 1

5

HTML 文档中的每个 LESS 文件都是独立编译的，因此您在 master.less 中创建的任何 mixin 都只保留在该文件的上下文中，并且对其他 .less 文件不可见。

我建议你这样做：

  1. 用你所有的 mixins 创建一个文件 mixins.less，
  2. 在您的 master.less 中，首先导入该 mixins.less 文件，然后导入任何其他模块更少的文件，
  3. 在您的 HTML 文档中，仅引用 master.less。

我同意您遇到的情况在文档中没有明确定义，但我假设大多数想要使用 less.js 玩 LESS 的人只从一个文件开始。

希望这可以帮助。

于 2013-04-25T12:23:46.307 回答