在Less中减轻父项的颜色 [英] Lighten color from parent in Less
问题描述
我从Less入手,我想要的原因之一是因为ligthen()函数.所以我的第一个尝试就是为此做些事情.
I am starting out with Less and one of the reasons I wanted to is because of the ligthen() function. So my first attempt was to do something with that.
这是我的HTML
<div class="box blue">
<div class="boxbar">Foo</div>
blue
</div>
我终于让它工作了,但我怀疑应该是这样的:
I finally got it working, but I doubt it's supposed be like this:
@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 ..这不是我想要的,我以您在这里可以看到的结尾.然后,我需要为引入的每种新颜色编写代码.
How can I refactor this? Surely it must be easier to say "get your parent color, and lighten it a bit". I tried a couple of things: inherit (was worth a shot!), have the lightened versions inside .boxcar. But this obviously compiled to .boxcar .blue.. which is not what I want and I ended with what you can see here.. it works.. but it doesn't feel right. Then I would need to write code for every new color I introduce..
推荐答案
我不确定您想要的解决方案是什么……但是也许像制作mixin之类的东西可以帮助您不必编写太多的东西.
I am not completely sure what your desired solution would be ... but maybe something like making a mixin would help you from having to write so much stuff out.
少:
.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;
}
更新:
在 LESS> = 1.4 中,您想使用类似的方法从颜色名称中插入类名称:
Update:
In LESS>=1.4 you would want to use something like this to interpolate the class name from the color name:
.bgmixin(@color) {
@classname: ~"@{color}";
.@{classname} {
background-color: @@color;
.boxbar {
background-color: lighten(@@color, 10%);
}
}
}
这篇关于在Less中减轻父项的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!