Осветлить цвет от родителей в Меньше
Я начинаю с 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 .. это не то, что я хочу, и я закончил с тем, что вы можете увидеть здесь ... это работает ... но это не так. Тогда мне нужно было бы написать код для каждого нового цвета, который я представляю ..