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);
}