Less中能否使用父选择器&作为变量名的一部分简化重复代码？

核心结论 #

你设想的直接使用@&-color的用法无法在标准Less语法中实现。
父选择器&是选择器专属占位符，仅会在CSS选择器生成阶段做文本替换，不会参与变量名的解析逻辑。你直接编写@&-color时，Less会将其识别为名称为&-color的未定义变量，编译阶段会直接抛出变量不存在的错误。

可行的替代实现方案 #

你可以使用Less的each遍历功能配合动态变量引用语法实现代码精简，最终效果和你预期完全一致。

方案1：变量名与类名统一使用短横线分隔（kebab-case） #

如果可以将原驼峰格式的变量名调整为和类名一致的短横线格式，实现代码最简洁：

// 调整后的变量定义
@in-stock-color: #2ecc71;
@low-stock-color: #f39c12;
@out-of-stock-color: #e74c3c;
@not-available-color: #95a5a6;
@borderRadius: 2px;

// 批量生成样式
each(@states: in-stock, low-stock, out-of-stock, not-available, {
  .@{value} {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: @borderRadius;
    // 动态拼接变量名并取值
    background-color: @@{value}-color;
  }
});

方案2：保留原有驼峰格式变量 #

如果不想修改已有的驼峰变量名，可以通过键值对映射的方式实现：

// 保留原变量定义
@inStock-color: #2ecc71;
@lowStock-color: #f39c12;
@outOfStock-color: #e74c3c;
@notAvailable-color: #95a5a6;
@borderRadius: 2px;

// 定义类名与变量前缀的映射
@stateMap: {
  in-stock: inStock;
  low-stock: lowStock;
  out-of-stock: outOfStock;
  not-available: notAvailable;
}

// 批量生成样式
each(@stateMap, {
  .@{key} {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: @borderRadius;
    background-color: @@{value}-color;
  }
});

以上两种方案编译后输出的CSS和你最开始的手写代码完全一致，没有额外冗余。

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