LESS - 数学设定位置

Question

我是否可以用更少的代码编写 classes 以便具有相同 class 的每个元素都比前一个兄弟元素减去 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);
}