Zaczynam od Lessa, a jednym z powodów, dla których chciałem, jest funkcja ligthen (). Więc moją pierwszą próbą było coś z tym zrobić.

To jest mój HTML

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

W końcu to zadziałało, ale wątpię, żeby tak było:

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

Jak mogę to zmienić? Z pewnością musi być łatwiej powiedzieć „zdobądź kolor macierzysty i trochę go rozjaśnij”. Spróbowałem kilku rzeczy: dziedziczę (warto było zrobić!), Mam rozjaśnione wersje wewnątrz .boxcar. Ale to oczywiście kompilowało się do .boxcar .blue .. co nie jest tym, czego chcę i skończyłem z tym, co możesz zobaczyć tutaj .. to działa .. ale to nie jest właściwe. Wtedy musiałbym napisać kod dla każdego nowego koloru, który wprowadzam ..