Осветлить цвет от родителей в Меньше

Я начинаю с Less и одной из причин, по которой я хотел, является функция ligthen (). Поэтому моей первой попыткой было что-то сделать с этим.

Это мой HTML

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

Я наконец получил это работает, но я сомневаюсь, что это должно быть так:

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

Как я могу рефакторинг это? Наверняка должно быть проще сказать «получи свой родительский цвет и немного осветли его». Я попробовал пару вещей: наследовать (стоило того!), Иметь облегченные версии внутри .boxcar. Но это, очевидно, скомпилировано в .boxcar .blue .. это не то, что я хочу, и я закончил с тем, что вы можете увидеть здесь ... это работает ... но это не так. Тогда мне нужно было бы написать код для каждого нового цвета, который я представляю ..