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

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

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

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

How to re-calculate a style on sibling elements?

css

loops

for-loop

css-selectors

less