通过基数px * nth缩进每个第n个元素

Question

假设我有n个div。

<div class="indent">1</div>
<div class="indent">2</div>
<div class="indent">n</div>

我想缩进第一个10px，第二个缩10px等等。如何用css3（或更少）来完成？

.indent {
    padding-left: 10px;
}

.indent :nth-of-type(2) {
    padding-left: 20px;
}

.indent :nth-of-type(3) {
    padding-left: 30px;
}

我想把上面的代码变成1或2个班轮..

Answer 1

检查this。

它描述了如何在Less。

中创建循环

对于你的问题，这应该可以解决问题，假设你知道你有多少div。

.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));    // next iteration
    .indent :nth-of-type(@{counter}) {
        padding-left: unit((10 * @counter), px);
    }
} .loop(3);

这里，此代码将生成3次迭代。 请注意，迭代是根据您要求的迭代量生成的1.在这里，您将得到您所要求的但反向顺序。