在Less中如何实现可复用的逗号分隔选择器列表？

当然可行！从Sass切换到Less后，照样能实现这种可复用选择器列表的需求，我给你分享两种最常用的实现方式：

方法一：变量+插值语法（最直接对应Sass的方式） #

你可以先把这四种按钮选择器定义成一个变量，然后通过Less的插值语法（@{变量名}）在需要的地方引用它：

// 定义可复用的按钮选择器列表
@button-selectors: button, input[type='button'], input[type='submit'], input[type='reset'];

.a {
  @{button-selectors} {
    background: red;
  }
}

.b {
  @{button-selectors} {
    background: blue;
  }
}

编译后的CSS和你原来写的代码完全一致，而且以后要修改选择器的话，只需要改@button-selectors这一处就可以了，非常方便。

方法二：混合宏（Mixin）—— 适合带样式复用的场景 #

如果你不仅要复用选择器，还想把按钮的通用样式（比如内边距、边框圆角等）也一起封装，那用混合宏会更合适，还能支持传参数：

// 封装按钮选择器和可配置的样式
.button-styles(@bg-color) {
  button, input[type='button'], input[type='submit'], input[type='reset'] {
    background: @bg-color;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
}

// 在不同类名下调用，传入不同的背景色
.a {
  .button-styles(red);
}

.b {
  .button-styles(blue);
}

这种方式的扩展性更强，后续如果要给按钮加统一的hover样式，直接在混合宏里修改就行，所有调用的地方都会同步更新。

两种方法可以根据你的实际需求来选：如果只是单纯复用选择器，用变量插值就够了；如果需要连带着样式一起复用，混合宏是更好的选择。

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