Ich beginne mit Less und einer der Gründe, die ich wollte, ist die Funktion ligthen (). Mein erster Versuch war also, etwas damit zu tun.

Das ist mein HTML

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

Ich habe es endlich zum Laufen gebracht, aber ich bezweifle, dass es so sein soll:

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

Wie kann ich das umgestalten? Sicherlich muss es einfacher sein zu sagen: "Nimm deine Elternfarbe und helle sie ein bisschen auf". Ich habe ein paar Dinge ausprobiert: erben (war einen Versuch wert!), Die aufgehellten Versionen in .boxcar haben. Aber dies wurde offensichtlich zu .boxcar .blue kompiliert. Das ist nicht das, was ich will und ich endete mit dem, was Sie hier sehen können. Es funktioniert. Aber es fühlt sich nicht richtig an. Dann müsste ich Code für jede neue Farbe schreiben, die ich einführe.