Eu estou começando com menos e uma das razões que eu queria é por causa da função ligthen (). Então, minha primeira tentativa foi fazer algo com isso.

Este é meu HTML

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

Eu finalmente consegui trabalhar, mas duvido que seja assim:

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

Como posso refatorar isso? Certamente deve ser mais fácil dizer "pegue a cor dos seus pais, e alivie um pouco". Eu tentei um par de coisas: herdar (valeu a pena um tiro!), Tem as versões mais leves dentro do .boxcar. Mas isso obviamente compilado para .boxcar .blue .. que não é o que eu quero e acabei com o que você pode ver aqui .. funciona .. mas não parece certo. Então eu precisaria escrever código para cada nova cor que eu introduza.