如何重新计算兄弟元素的样式？

Question

不确定我是否正确地问了这个问题。所以请允许我进一步解释。

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 的基本样式，以便每个额外兄弟姐妹的颜色更深。所以#q2 比#q1 暗10%，#q3 比#q2 暗10%，以此类推。

Answer 1

您可以使用带有保护表达式的递归 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);