Less 用较少的时间从父级变亮颜色

我开始时使用的是Less，我想要使用它的原因之一是因为ligthen（）函数。所以我的第一次尝试就是用它做点什么

这是我的HTML

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

---

我如何重构这个？当然，说“让你的父母的颜色变浅一点”肯定更容易。我尝试了几件事：继承（值得一试！），把轻量化版本放在里面。但这显然被编译成了.boxcar.blue。。这不是我想要的，我以你在这里看到的结束了。。它起作用了。。但这感觉不对。然后我需要为我介绍的每种新颜色编写代码。

我不完全确定您想要的解决方案是什么。。。但也许做一个混音可以帮助你不必写那么多东西

更少：

.bgmixin（@color）{
（~“@{color}”）{
背景色：@@color；
.boxbar{
背景色：变亮（@@color，10%）；
}
}
}
@蓝色：#468ACE；
@绿色：#41A53D；
@红色：#9C2525；
.bgmixin（“蓝色”）；
.bgmixin（“绿色”）；
.bgmixin（“红色”）；

CSS:

.blue{
背景色：#468ace；
}
.蓝色.长方体{
背景色：#6ea3d9；
}
格林先生{
背景色：#41a53d；
}
.green.boxbar{
背景色：#59c055；
}
瑞德先生{
背景色：#9c2525；
}
.红色.长方体{
背景色：#c52f2f；
}

---

更新： 在LESS>=1.4中，您可能希望使用类似的方法从颜色名称中插入类名：

.bgmixin（@color）{
@类名：~“@{color}”；
.@{classname}{
背景色：@@color；
.boxbar{
背景色：变亮（@@color，10%）；
}
}
}

+1在mixin中很好地使用了

@

参考功能。很有创意。是的，这就是我想要的。“@”是什么意思？@ScottS Thank=）你可能已经知道我对解决方案很敏感了@GerbenJacobs

@

用于访问使用变量名定义的变量。在上面搜索它，我只想补充一点，对于小于1.4的类名：

@classname:~“@{color}”，您可能需要这样做@{classname}{…

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