如何为多个LESS父类批量应用规则？使用mixin复用样式是否最优？

LESS样式优化可选方案 #

不是只有「类映射+mixin」这一种实现方式，以下几种方案可以根据你的项目维护需求选择：

方案1：循环遍历映射表（适合后续会新增同类块的场景） #

如果后续还可能增加新的同类型内容块，用each循环+映射表的写法可以进一步减少重复代码，新增块只需要加一行键值对即可：

// 定义类名与对应边框色的映射
@content-blocks: {
  ddemrcontent: cadetblue;
  blocksmarttemplate: burlywood;
  blocktoken: #8a7090;
}

// 循环批量生成所有规则
each(@content-blocks, (@color, @classname) {
  .@{classname} > span {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    margin-top: 0.2rem;
    padding-left: 0.2rem;
    border-left: 4px solid @color;

    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }
})

.ddfreetext {
  display: flex;
  min-height: 1.7rem;
  margin-top: 0.2rem;
  border: 1px dashed black;
}

方案2：公共样式抽离（适合追求编译后CSS体积最小、代码可读性最高的场景） #

如果不想用太多LESS高级特性，直接把公共属性合并、差异化属性单独声明即可，代码逻辑最直白，新人接手也能一眼看懂：

// 统一定义公共样式
.ddemrcontent > span, 
.blocksmarttemplate > span, 
.blocktoken > span {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  margin-top: 0.2rem;
  padding-left: 0.2rem;

  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}

// 单独声明差异化的边框颜色
.ddemrcontent > span { border-left: 4px solid cadetblue; }
.blocksmarttemplate > span { border-left: 4px solid burlywood; }
.blocktoken > span { border-left: 4px solid #8a7090; }

.ddfreetext {
  display: flex;
  min-height: 1.7rem;
  margin-top: 0.2rem;
  border: 1px dashed black;
}

方案3：通用属性mixin抽离（适合全局复用基础尺寸的场景） #

观察到ddfreetext和其他块也有相同的min-height、margin-top属性，可以把通用属性抽成公共mixin，后续调整基础尺寸只需要改一处即可同步全量更新：

// 抽离通用基础属性
.base-block-style() {
  min-height: 1.7rem;
  margin-top: 0.2rem;
}

.ddemrcontent > span, 
.blocksmarttemplate > span, 
.blocktoken > span {
  display: inline-flex;
  align-items: center;
  .base-block-style();
  padding-left: 0.2rem;
  border-left: 4px solid;

  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}

.ddemrcontent > span { border-left-color: cadetblue; }
.blocksmarttemplate > span { border-left-color: burlywood; }
.blocktoken > span { border-left-color: #8a7090; }

.ddfreetext {
  display: flex;
  .base-block-style();
  border: 1px dashed black;
}

你目前在用的参数mixin方案也属于可读性和维护性平衡的合理选择，没有明显缺陷。

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