有麻煩LESS和混入

Question

據我瞭解，這是有效的LESS語法：

.some-mixin(@color) 
{ 
    border-top:1px solid @color; 
} 

.some-element { 
    .some-mixin (#FFFFFF); 
} 

，並會導致這樣的：

.some-element { 
    border-top:1px solid #FFFFFF; 
} 

---

現在讓我們說我們原來的CSS語法像這樣：

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

Le t也考慮到了，根據ul.sidebar li有很多不同的「類別」（而不僅僅是A），只是顏色不同而已。所以，這就是我想：

/* 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... */ 
} 

---

然而：這最後一個是不工作。

我做錯了什麼？我發明了另一個...少了嗎？

---

P.S.剛剛發現this answer。猜猜我想要做的是仍然不受支持？嗯...

Answer 1

試試這個：

ul.sidebar li { 
    &.categoryA { .category-item(#F3661F); } 
    &.categoryB { .category-item(#FF0000); } 
    &.categoryC { .category-item(#00FF00); } 

    /*Etc.*/ 
} 

這個工作正常，我。輸出是：

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