我最近开始使用LESS CSS - 它太棒了(如果你还没有,我建议你查看一下)。
我正在开展一个项目,我想在其中执行以下操作(这不是正确的语法,只是尝试解释我的问题):
if(lightness(@background_color) <= 50%)
{
@secondary_color = #fff;
}
else
{
@secondary_color = #000;
}
我知道我可以使用mixins,但上面的方法可以避免每次我需要根据@background_color
变量更改颜色时编写mixins(因为我将使用{{ 1}}用于边框,背景颜色等)。
我一直在努力寻找解决方案,但我没有运气。如果有人知道我能做些什么来做这项工作,我很乐意听到它们。
谢谢!
答案 0 :(得分:5)
更新我只是重新阅读您的评论并更好地了解问题。这应该有效:
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = color){
color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = background){
background-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = border){
border-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = all){
color: black;
background-color: black;
border-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = color){
color: white
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = background){
background-color: white;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = border){
border-color: white;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = all){
color: white;
background-color: white;
border-color: white;
}
然后使用mixin:
.class1 {
.secColor (#fff, color) //should only set the color property for class1
}
.class2 {
.secColor (#000, all) //should set all three properties for class2
}
添加更紧凑的版本
.propSwitch (@prop, @clr) when (@prop = color) {
color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = background) {
background-color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = border) {
border-color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = all) {
color: @clr;
background-color: @clr;
border-color: @clr;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) {
.propSwitch (@prop, #000);
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) {
.propSwitch (@prop, #fff);
}