less - Less で親の色を明るくする

Question

私は Less から始めていますが、Less を使いたかった理由の 1 つは、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.. にコンパイルされており、これは私が望んでいるものではありません。次に、紹介する新しい色ごとにコードを記述する必要があります..