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

Question

我的.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; } 
} 

Answer 1

是，您可以使用（〜“”）将变量输出为选择器。

.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; } 
    } 
}