Description
First of all, apologies for the confusing title, but you'll see what I mean below.
Say we want to use a mixin within a namespace:
test1.less:
#foo {
.bar() {
color: #FF0000;
}
}
#test {
#foo > .bar;
background-color: #00FF00;
}
We compile test1.less and everything here is fine.
OK, so now we want to move our mixin to a separate less file:
test2.less:
#foo {
@import "bar.less";
}
#test {
#foo > .bar;
background-color: #00FF00;
}
bar.less:
.bar {
color: #FF0000;
}
We compile test2.less and, again, everything is fine.
Now let's say we want another import in our original file, and that import contains a mixin.
test3.less:
@import "anothermixin.less";
#foo {
@import "bar.less";
}
#test {
.anothermixin();
#foo > .bar;
background-color: #00FF00;
}
bar.less:
.bar {
color: #FF0000;
}
anothermixin.less:
.anothermixin() {
font-size: 14px;
}
We compile test3.less and yet again, everything is A-OK.
But say we want to add a class into anothermixin.less. And let's say we want that class to call our existing mixin called anothermixin().
test4.less:
@import "anothermixin.less";
#foo {
@import "bar.less";
}
#test {
.anothermixin();
#foo > .bar;
background-color: #00FF00;
}
bar.less:
.bar {
color: #FF0000;
}
anothermixin.less:
.anothermixin() {
font-size: 14px;
}
.showstopper {
.anothermixin();
}
If we try to compile test4.less we now get a "NameError: #foo > .bar is undefined" error.
So it seems this error is caused by a combination of the following:
- We have a less file (let's call it A) that contains a mixin and a call to said mixin
- We have another less file (let's call it B) that contains just a mixin
- We have a third less file (let's call it C) where:
- less file A is imported
- less file B is imported within a namespace
- A call to the mixin within less file B (which is also within a namespace) is made
It looks like if any of these are NOT true then the error doesn't occur.