Having trouble with LESS and Mixins

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

I can not see any part of what you are trying to do that would not be supported in LESS. I must be missing something here ... as I do not see the problem. — Martin Turjak, May 07 '13 at 16:32

score 3 · Accepted Answer · answered May 07 '13 at 16:14

3

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;
}
...

answered May 07 '13 at 16:14

Martin Turjak

20,896
5
56
76

And it can not be the version of LESS as this works since 1.1.0 if you try it on http://less2css.org/ You could check for typos in your code, maybe. – Martin Turjak May 07 '13 at 16:39
I'm really not sure what I was doing wrong... but I guess you were right (perhaps something to do with the `&`s? Don't know...) Thanks a lot, anyway! :-) – Dr.Kameleon May 11 '13 at 13:39

Having trouble with LESS and Mixins

1 Answers1