LESS - 设置位置的数学答案

【问题标题】：LESS - Mathematics to set positionLESS - 设置位置的数学
【发布时间】：2015-02-13 11:53:50
【问题描述】：

无论如何我可以用更少的代码编写类，这样具有相同类的每个元素都会比前一个兄弟元素减去 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 个步骤有关。

提前致谢！

【问题讨论】：

虽然您可以使用 Less 循环来避免代码重复，但如果没有，它仍然无济于事。的元素是一个未知数。您必须静态生成与最大数量一样多的类。可能的元素。

标签： html css less css-position fuelux

【解决方案1】：

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

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

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

【讨论】：

太棒了，非常感谢！我发现的唯一问题是，由于某种原因，循环在 -725 和 px 之间生成了一个空格，因此该值在 chrome 开发工具中引发了错误。反正有没有删除空间？我尝试了以下方法，但它似乎不起作用： .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); &[data-step="@{counter}"] { 左:(-725+(@counter - 1)*56)px; } }
别担心，我已经解决了，我需要移动括号内的 px :)