据我了解,这是有效的 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;
}
我们还要考虑到,在下面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... */
}
但是:最后一个不起作用。
难道我做错了什么?我发明了另一个……更少吗?
PS刚刚找到这个答案。猜猜我正在尝试做的事情仍然不受支持?嗯……