如何使用 LESS 为每个第 n 个元素添加不同的 CSS 样式，具体取决于 n

Question

我正在尝试向 div 中的后续元素添加不同的填充。我的 DOM 看起来很简单。

<div class="parent">
   <div>0</div>
   <div>15</div>
   <div>30</div>
   ...
</div>

所以我希望我的第一个元素有 0 个填充，第二个 15，第三个 30 等等。使用 LESS，我该如何完成这项工作？我试过：

.parent div:nth-of-type(n) {
           padding-left: n*15px;
}

谢谢！

Answer 1

我想你想在视觉上实现一个楼梯。在这种情况下，您可以像下面这样操作：

.parent {
  line-height: 1.2em;
}

.parent>div:not(:first-child)::before {
  content: "";
  float: left;
  width: 15px; /*your padding*/
  height: calc(1.2em + 2px);

}

<div class="parent">
  <div>0</div>
  <div>15</div>
  <div>30</div>
  <div>45</div>
  <div>60</div>
  <div>75</div>
</div>

Answer 2

使用less（但必须设置元素个数）：

.parent (@indexstart,@index) when (@indexstart < @index ){
  div:nth-child(@{indexstart}){
    padding-left: (@indexstart - 1) * 15px;
  }
  .parent (@indexstart + 1,@index);
}
.parent (1,4);

See example

如何使用 LESS 为每个第 n 个元素添加不同的 CSS 样式，具体取决于 n

How to add different CSS style to every nth element, depending on n using LESS

css

padding

less