less 结合 nth-child 选择器循环生成样式

Posted 2021-02-01 wisewrong

问题描述：

实现头像的堆叠效果

从第二个头像开始，每个头像都会盖住前一个头像上，遮盖的宽度为 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);
}