리팩터링 LESS 코드는

Question

나는 색상 변수의 무리 선언이 :

@green: #00a75c; 
@darkgreen: #118335; 
@blue: #0099ff; 
@orange: #f7931e; 
@sapphire: #303a96; 
@gray: #4d4d4d; 

내가 사용 CMS는 옵션으로 각각의 색깔이있다. 따라서 생성 된 html은 이러한 색상 이름 중 하나를 형제로 사용합니다. 이런 식으로 뭔가가 생성됩니다 :

.thing{ 
    &.orange{ 
    color: @orange; 
    border: @orange solid 1px; 
    } 
    &.blue{ 
    color: @blue; 
    border: @blue solid 1px; 
    } 
    &.sapphire{ 
    color: @sapphire; 
    border: @sapphire solid 1px; 
    } 
    &.green{ 
    color: @green; 
    border: @green solid 1px; 
    } 

    &:hover{ 
    text-decoration: none; 
    color: white; 
    &.orange{background-color: @orange;} 
    &.blue{background-color: @blue;} 
    &.sapphire{background-color: @sapphire;} 
    &.green{background-color: @green;} 
    } 
} 

이 리팩토링하는 가장 좋은 방법은 무엇입니까 : 내 적은 코드의 요소를 대상으로하는 방법

<div class="thing orange"> 
</div> 

이 현재 무엇입니까? 나는 거대한 mixin, 하나의 거대한 mixin을 만들어야합니까? 색상을 어떻게 든 반복 할 수 있습니까?

Answer 1

seven-phases-max의 의견을 바탕으로 여기에 구현 예가 나와 있습니다.

@colours: 
    'green' #00a75c, 
    'darkgreen' #118335, 
    'blue' #0099ff, 
    'orange' #f7931e, 
    'sapphire' #303a96, 
    'gray' #4d4d4d; 

.generate-colour-classes(@index: length(@colours)) when (@index >0) { 
    @colour: extract(@colours, @index); 
    @property-name: e(extract(@colour, 1)); 
    @property-value: extract(@colour, 2); 
    .generate-colour-class(@property-name; @property-value); 
    .generate-colour-classes(@index - 1); 
} 

.generate-colour-class(@name; @value){ 
    &.@{name} { 
     color: @value; 
     border: @value solid 1px; 
    } 
} 

.thing { 
    .generate-colour-classes();  
}