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