从减轻家长的颜色欠(Lighten color from parent in Less)

我开始接触少，我想原因之一是因为l​​igthen（）函数。 所以我的第一次尝试做的东西。

这是我的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 ..这是不是我想要的，我和你可以在这里看到的..它的工作结束了..但它感觉不对。 那我就需要编写代码为每一个新的颜色我介绍一下..

Answer 1:

我不能完全确定您需要的解决方案会是怎样......但也许像做一个mixin会帮助你不必写了这么多东西了。

减：

.bgmixin(@color) {
    (~".@{color}") {
        background-color: @@color;
        .boxbar {
            background-color: lighten(@@color, 10%);
        }
    }
}

@blue: #468ACE;
@green: #41A53D;
@red: #9C2525;

.bgmixin("blue");
.bgmixin("green");
.bgmixin("red");

CSS：

.blue{
  background-color: #468ace;
}
.blue .boxbar {
  background-color: #6ea3d9;
}
.green{
  background-color: #41a53d;
}
.green .boxbar {
  background-color: #59c055;
}
.red{
  background-color: #9c2525;
}
.red .boxbar{
  background-color: #c52f2f;
}

---

更新：

在小于> = 1.4，你会想用这样的事情，从颜色名称插值类名：

.bgmixin(@color) {
    @classname: ~"@{color}"; 
    .@{classname} {
        background-color: @@color;
        .boxbar {
            background-color: lighten(@@color, 10%);
        }
    }
}

文章来源: Lighten color from parent in Less