I have defined several color variables:
@green: #00a75c;
@darkgreen: #118335;
@blue: #0099ff;
@orange: #f7931e;
@sapphire: #303a96;
@gray: #4d4d4d;
The content management system I am using allows for selecting a color as an option. As a result, the generated HTML will include one of these color names as a sibling element. Here is an example of the generated code:
<div class="thing orange">
</div>
Presently, I am styling the elements in my Less code in the following manner:
.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;}
}
}
I am looking to refactor this code. Should I create individual mixins, a single large mixin, or is there a way to loop over the colors programmatically?