少数 - 数学设定位置

Question

无论如何，我可以用更少的代码编写类，以便具有相同类的每个元素将减去前一个兄弟的56px？

到目前为止，我的代码示例如下：

.complete {
    position:absolute

    &[data-step="1"] { left:-725px; }
    &[data-step="2"] { left:-669px; }
    &[data-step="3"] { left:-613px; }
    &[data-step="4"] { left:-557px; }

}

这似乎不是一种有效的处理方式，因为可能存在超过4个步骤的实例。我可以使用nth-child但是这也与是否有超过4个步骤有关。

提前致谢！

Answer 1

您可以使用loop。这适用于您的情况：

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));
  &[data-step="@{counter}"] { left:(-725 + (@counter - 1) * 56px); }
}

.complete {
    position:absolute;
    .loop(4);
}