I have developed a parametric mixin that utilizes a unique "node-value" system to locate the children of an element. The process involves detecting the children through a loop function named ".extractArrays", which contains ".deliverChild" within it. Subsequently, the discovered children (maximum of 4) are fed into ".calculateWidth", which then calculates and stores the width of each child in specific variables (e.g., "calculatedWidth1").
The challenge arises when there are no third and fourth children present - this causes errors as @child3 and @child4 remain undefined. To address this issue, I initialized @child3 and @child4 with zero values prior to invoking the mixins, intending for them to default to 0 before being accessed by the mixins. Strangely, even when a third child is identified, the returned value of @child3 from the mixin fails to override the initial value of 0 set for @child3. This puzzling behavior has led me to question certain aspects of Less, particularly regarding mixins and their scope.
@child3: none, 0 0, 0, 0;
@child4: none, 0 0, 0, 0;
.extractArrays(@index, @node, @node-value, @elements-array) when (@index <= @length-elements-array) {
@element-array: extract(@elements-array, @index);
@found-node: extract(@element-array, 2);
.deliverChild(@element-array, @found-node) when (@found-node = @child-node-value1) {
@child1: extract(@element-array, 1);
}
.deliverChild(@element-array, @found-node) when (@found-node = @child-node-value2) {
@child2: extract(@element-array, 1);
}
.deliverChild(@element-array, @found-node) when (@found-node = @child-node-value3) {
@child3: extract(@element-array, 1);
}
.deliverChild(@element-array, @found-node) when (@found-node = @child-node-value4) {
@child4: extract(@element-array, 1);
}
.deliverChild(@element-array, @found-node);
.extractArrays(@index + 1, @node, @node-value, @elements-array);
}
.extractArrays(1, @node, @node-value, @elements-array);
.calculateWidth(@child1, 1);
.calculateWidth(@child2, 2);
.calculateWidth(@child3, 3);
width: @calculatedWidth1 + @calculatedWidth2 + @calculatedWidth3 + @calculatedWidth4;