Less伪类伪元素Extend：列表项伪元素样式复用及简写方式咨询

嘿，我完全懂你的需求——不想在每个nth-child的伪元素里重复写一堆相同的属性，只针对top和left做差异化调整对吧？其实你说的mixins方案是完全可行的，大概率是你写的时候没注意到一些细节，我给你分享正确的实现方式：

核心思路：带参数的Mixins #

把所有重复的通用属性封装成一个带参数的mixin，参数就是你需要差异化的top和left值，这样每个子元素调用时只需要传入不同的参数，不用重复写其他属性。

步骤1：定义通用Mixin #

先把所有复用的属性（比如Font Awesome的字体设置、伪元素定位方式、颜色字号等）放进mixin里，同时把top和left设为可传入的参数：

// 定义带参数的mixin，接收top、left两个变量
.fa-pseudo(@top, @left) {
  position: absolute;
  font-family: 'Font Awesome 5 Free'; // 按需换成Pro版本或其他Font Awesome字体
  font-weight: 900; // 注意：Solid图标需要900权重，Regular是400
  color: #2c3e50;
  font-size: 18px;
  // 其他你想复用的通用属性都放这里
  top: @top;
  left: @left;
}

步骤2：在列表项中调用Mixin #

给每个nth-child的伪元素调用这个mixin，传入对应的top和left值，再单独设置每个元素的content（因为图标代码不同）：

li {
  position: relative; // 必须！伪元素的absolute需要相对定位的父容器
  padding-left: 30px; // 给图标留出空间

  &:nth-child(1)::before {
    .fa-pseudo(2px, 0);
    content: "\f007"; // 用户图标
  }

  &:nth-child(2)::before {
    .fa-pseudo(4px, 0);
    content: "\f023"; // 锁图标
  }

  &:nth-child(3)::before {
    .fa-pseudo(6px, 0);
    content: "\f041"; // 铅笔图标
  }
}

为什么你的Mixins没生效？排查点 #

如果之前的mixin没起作用，可能是这几个原因：

• 父元素没设position: relative：伪元素的top/left是相对于父元素的，父元素默认static的话，伪元素会相对于页面定位，看起来像是没生效。
• Mixin定义或调用错误：比如mixin名字写错、参数顺序传反，或者调用时没加括号（Less中不带参数的mixin可以不加括号，但带参数的必须加）。
• Font Awesome字体引用问题：确保你已经正确引入了Font Awesome的CSS文件，字体权重设置和图标类型匹配（比如Solid图标需要font-weight:900）。

进阶优化：把图标内容也做成参数 #

如果你连content也想统一管理，可以把它也加入mixin参数：

.fa-pseudo(@top, @left, @icon-content) {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #2c3e50;
  font-size: 18px;
  top: @top;
  left: @left;
  content: @icon-content;
}

调用时直接传图标代码：

&:nth-child(1)::before {
  .fa-pseudo(2px, 0, "\f007");
}

这样就彻底避免了重复代码，维护起来也更方便啦！

内容的提问来源于stack exchange，提问作者Maxim Gordiyenko