html - LESS - 数学设定位置

Question

无论如何，我是否可以在 less 中编写类，以便具有相同类的每个元素都比前一个兄弟元素减去 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);
}