less - 为什么我的 LESS 变量必须相同

Question

我有一个变量，我正在通过这个循环，它将用于动态命名类。没关系，这有可能产生大量的类，我想知道为什么如果我在函数调用或其他任何地方将“红色”变量更改为其他任何东西，基本上如果它们不完全相同，我会得到一个“ Object[object] 没有方法 toCSS。

注意：我在 mac 上使用 less 应用程序在保存时进行编译。

混合调用：

.createShades (10, "red", #ff3333);

mixin 本身

// Generate our reds
.createShades (@index, @color, @base-color) when (@index > 0) {
    @i: @index;
    .createShade (@index, @i, @color, @base-color);
    .createShades (@index - 1, @color, @base-color);
}
.createShades (0, "red", @base-color) {}

.createShade (@index, @i, @color, @base-color) when (@i > 0) {
    @num: percentage((lightness(@base-color)/100) * (1 - (@i / @index)));
    @newShade: darken(@base-color, @num);
    (~".@{color}-@{i}-@{index}-text") {
        color: @newShade;
    }
    (~".@{color}-@{i}-@{index}-bg") {
        background-color: @newShade;
    }
    .createShade (@index, @i - 1, @color, @base-color);
}
.createShade (@index, 0, "red", @base-color) {}

Answer 1

您需要将结尾mixin（当值达到 时使用0）更改为 have@color而不是"red")。所以...

.createShades (0, @color, @base-color) {}
.createShade (@index, 0, @color, @base-color) {}

这是因为它正在寻找“红色”的匹配项，因此当您将调用更改为另一种颜色时，它会引发错误，因为它与“红色”不匹配。