我可以使用.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; } 
    } 
}