Estoy empezando con Less y una de las razones por las que quise hacerlo es debido a la función ligthen (). Así que mi primer intento fue hacer algo con eso.

Este es mi HTML

<div class="box blue">
    <div class="boxbar">Foo</div>
    blue
</div>

Finalmente lo puse en funcionamiento, pero dudo que se suponga así:

@blue:   #468ACE;
@green:  #41A53D;
@red:    #9C2525;
@purple: #8938BF;

div 
{
    padding: 10px;
}

.blue { 
    background-color: @blue; 
    .boxbar { background-color: lighten(@blue, 10%); }
}
.green { 
    background-color: @green; 
    .boxbar { background-color: lighten(@green, 10%); }
}
.red { 
    background-color: @red; 
    .boxbar { background-color: lighten(@red, 10%); }
}
.purple { 
    background-color: @purple; 
    .boxbar { background-color: lighten(@purple, 10%); }
}

.boxbar 
{
    height: 10px;
}

¿Cómo puedo refactorizar esto? Seguramente debe ser más fácil decir "obtener el color de tu padre y aclararlo un poco". Probé un par de cosas: heredar (¡valió la pena intentarlo!), Tener las versiones aligeradas dentro de .boxcar. Pero esto obviamente se compiló en .boxcar .blue .. que no es lo que quiero y terminé con lo que puedes ver aquí ... funciona ... pero no se siente bien. Entonces necesitaría escribir código para cada nuevo color que introduzco ...