不知道我是否正确地问了这个。因此，请允许我进一步解释。
的HTML
<div class='col'>
<div id='q1' class='qBlock'
</div>
<div class='col'>
<div id='q2' class='qBlock'
</div>
<div class='col'>
<div id='q3' class='qBlock'
</div>
较少的
@qBlockBG: #ccc;
.qBlock { color: white; }
#q1: { background-color: @qBlockBG; }
#q{n}: { background-color: darken(#q{n-1}, 10%); } <--- doesn't work, but that's the idea
我要做的是#q1为每个兄弟姐妹重新计算基本样式，以便每个其他兄弟姐妹的颜色都更深。因此，#q210％黑暗比#q1和#q310％黑暗比#q2，等等。
您可以使用带有保护表达式的递归mixin在LESS中模拟循环。这是一个适用于您的案例的示例：
#q1 {
background-color: #ccc;
}
/* recursive mixin with guard expression - condition */
.darker-qs(@color, @index) when (@index < 10) {
@darker-color: darken(@color, 10%);
/* the statement */
#q@{index} {
background-color: @darker-color;
}
/* end of the statement */
/* the next iteration's call - final expression */
.darker-qs(@darker-color, @index + 1);
}
/* the primary call - initialization */
.darker-qs(#ccc, 2);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句