Having trouble with LESS and Mixins - css

Question

From what I understand this is valid LESS syntax :
.some-mixin(#color)
{
border-top:1px solid #color;
}
.some-element {
.some-mixin (#FFFFFF);
}
And would result to this :
.some-element {
border-top:1px solid #FFFFFF;
}
Now let's say our original CSS syntax is like this :
ul.sidebar li.categoryA { border-left: 15px solid #F3661F; }
ul.sidebar li.categoryA.active,
ul.sidebar li.categoryA.active a {
background: #F3661F;
border-top:1px solid #F3661F;
border-bottom: 1px solid #F3661F;
}
ul.sidebar li.categoryA:hover {
color:#AAA; border-left:229px solid #F3661F;
}
Let's also take into account, that under ul.sidebar li there are lots of different "categories" (and not just A), all different just in the color. So that's what I thought :
/* MIXIN */
.category-item (#color)
{
border-left: 15px solid #color;
&.active, &.active a {
background: #color;
border-top: 1px solid #color;
border-bottom: 1px solid #color;
}
&:hover {
color: #color;
border-left: 229px solid #color;
}
}
/* RULES */
ul.sidebar li {
.categoryA { .category-item(#F3661F); }
.categoryB { .category-item(#FF0000); }
.categoryC { .category-item(#00FF00); }
/* Etc... */
}
However : this last one is not working.
Am I doing something wrong? Did I invent another... LESS?
P.S. Just found this answer. Guess what I'm trying to do is still unsupported? Hmmm...

Answer 1

Try this:
ul.sidebar li {
&.categoryA { .category-item(#F3661F); }
&.categoryB { .category-item(#FF0000); }
&.categoryC { .category-item(#00FF00); }
/*Etc.*/
}
this works fine for me. The output is:
ul.sidebar li.categoryA {
border-left: 15px solid #f3661f;
}
ul.sidebar li.categoryA.active,
ul.sidebar li.categoryA.active a {
background: #f3661f;
border-top: 1px solid #f3661f;
border-bottom: 1px solid #f3661f;
}
ul.sidebar li.categoryA:hover {
color: #f3661f;
border-left: 229px solid #f3661f;
}
...