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

问题描述

不确定我问得对不对。所以请允许我进一步解释。

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%，依此类推。

解决方法

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