我可以使用.LESS变量来缩短此语法吗？

My.less文件根据页面类设置各种元素的颜色。因此，在我的3页（关于、能源、报告）中，我重复了这些元素，我觉得我应该能够以某种方式只解决一次，但我无法理解：

@color_about: #54B948;
@color_energy: #C41230;
@color_reports: #FBB040;

.about {
  @color: @color_about;
  h1, .thick-bottom-border, &.thick-bottom-border { color: @color;     }
  &.button:hover, &.button:focus, &.label { background-color: @color; }
}

.energy {
  @color: @color_energy;
  h1, .thick-bottom-border, &.thick-bottom-border { color: @color;         }
  &.button:hover, &.button:focus, &.label { background-color: @color; }
}

.reports {
  @color: @color_reports;
  h1, .thick-bottom-border, &.thick-bottom-border { color: @color;     }
  &.button:hover, &.button:focus, &.label { background-color: @color; }
}

是的，您可以使用（~“”）作为选择器输出变量

.do_color("about", #54B948);
.do_color("energy", #C41230);
.do_color("reports", #FBB040);

.do_color(@name, @color) {
  (~".@{name}") {
    h1, .thick-bottom-border, &.thick-bottom-border { color: @color;     }
    &.button:hover, &.button:focus, &.label { background-color: @color; }
  }
}

是的，您可以使用（~“”）作为选择器输出变量

.do_color("about", #54B948);
.do_color("energy", #C41230);
.do_color("reports", #FBB040);

.do_color(@name, @color) {
  (~".@{name}") {
    h1, .thick-bottom-border, &.thick-bottom-border { color: @color;     }
    &.button:hover, &.button:focus, &.label { background-color: @color; }
  }
}