Question

在我目前的项目中，我在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中包含其他较少的文件，如mixin.less。在这个文件中，我有很多声明可以正常测试。

但是如果我尝试在我的模块中使用像.gradient这样的一些mixin B.less我会变成这样的错误： .gradient未定义

放在mixin.less中的梯度mixin完全没问题：

.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手册，但我不知道什么是错的。

文件正确加载等等，这里有错吗？

Answer 1

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

我建议你这样做：

使用所有mixin创建一个mixins.less文件，
在master.less中，导入mixins.less文件优先，然后导入任何其他模块少的文件，
在HTML文档中，仅引用master.less。

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

希望这有帮助。

LESS Mixins不可用

1 个答案: