Less 結合 nth-child 選擇器循環生成樣式

問題描述：

實現頭像的堆疊效果

從第二個頭像開始，每個頭像都會蓋住前一個頭像上，遮蓋的寬度為 30px

實現疊加的方式有很多，比如給每個頭像添加 translateX 屬性，或者使用負值 margin

主要問題在於距離。第一個的頭像的距離為 0，第二個為 30，第三個為 60，第四個為 90...

如果用 js 就能寫個循環，然后分別添加。但因為移動端適配的問題，需要在 css 中生成

 

 

解決方案：

查了好些文章才知道，原來 less 是可以寫循環函數的

首先定義一個循環函數，根據 nth-child 分別設置移動距離

.head-picture(@n, @i:1) when (@i <= @n) {
  &:nth-child(@{i}) {
    transform: translateX(-30px * (@i - 1));
  }
  .head-picture(@n,(@i + 1));
}

然后在樣式里面調用：

&__item {
　　// ...
　　.head-picture(10);
}