LESS CSS-在mixin中设置变量 [英] LESS CSS - Setting variable within mixin
问题描述
我最近开始使用不用CSS -太棒了(如果您还没有使用过,我建议您检查一下) ).
I've recently starting using LESS CSS - it's awesome (I recommend you check it out if you haven't yet).
我正在一个项目中,我想执行以下操作(这不是正确的语法,只能尝试解释我的问题):
I'm working on a project, where I would like to do the following (It's not proper syntax, it's only to try and explain my problem):
if(lightness(@background_color) <= 50%)
{
@secondary_color = #fff;
}
else
{
@secondary_color = #000;
}
我知道我可以为此使用mixins,但是上述方法将使我不必每次需要基于@background_color
变量更改颜色时都必须编写mixins(因为我将使用@secondary_color
边框,背景色等).
I know that I can use mixins for this, but the above method would save me from having to write a mixins everytime I need to change a color based on the @background_color
variable (since I will be using @secondary_color
for borders, background colors, etc).
我一直在寻找解决方案,但是我没有运气.如果有人对我可以做些什么有任何想法,我很想听听他们的意见.
I've been trying to find a solution, but I've had no luck. If anybody has any idea's on what I can do to make this work, I'd love to hear them.
谢谢!
推荐答案
更新我只是重新阅读您的评论,以更好地理解问题.这应该起作用:
UPDATE I just reread your comment and understand the problem better. This should work:
.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);
}
这篇关于LESS CSS-在mixin中设置变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!