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

标签：描述   第一个   head   inf   image   函数   根据   info   item   

问题描述：

实现头像的堆叠效果

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

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

标签：描述   第一个   head   inf   image   函数   根据   info   item   

原文地址：https://www.cnblogs.com/wisewrong/p/10238157.html