根据我的理解,这是有效的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... */
}
然而:最后一个不正在工作。
我做错了吗?我发明了另一个......不是吗?
P.S。刚刚找到this answer。猜猜我想要做的是仍然不受支持?嗯...
答案 0 :(得分:3)
试试这个:
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;
}
...