Question

I have a variable I am passing through this loop in less that will be used to name the class dynamically. Nevermind that this has the possibility of generating a heinous amount of classes, I am wondering why if I change the “red” variable to anything else in the function call or anywhere else, basically if they are not all the same, I get an “Object[object] has no method toCSS.

note: I am using the less app on mac to compile on save.

the mixin call:

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

The mixin itself

// 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

You need to change your ending mixin (used when the value reaches 0) to have @color instead of "red"). So…

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

This is because it is seeking a match for “red” so when you change your call to another color, it throws an error since it does not match “red”.