LESS CSS - Setting variable within mixin

Question

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

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.

Thanks!

Take a look at the section on pattern matching and guard expressions — john
– john, Commented Feb 28, 2012 at 21:31
Thanks for the response. The only problem with that is that I'm limited to one CSS property per "guard". I'll be using @secondary_color for borders, font-colors, backgrounds, etc. If I went this route, I would need to set a guard/mixin up for each propery (background-color, color, border-color, etc) because I won't necessarily be setting each of those properties at the same time (ex. on one element, I only want to change the text color, but on another I only want to set the border color). Thats what I'm trying to avoid, if at all possible. — Nicholas LeBlanc
– Nicholas LeBlanc, Commented Feb 28, 2012 at 23:49

ScottS · Accepted Answer · 2012-02-29 02:41:04Z

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

Then use the mixin:

.class1 {
  .secColor (#fff, color) //should only set the color property for class1
}

.class2 {
  .secColor (#000, all) //should set all three properties for class2
}

ADDED MORE COMPACT VERSION

.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);
}

@N.LeBlanc--glad you liked it. I just updated with what I believe is a more compact way to write it.

Collectives™ on Stack Overflow

LESS CSS - Setting variable within mixin

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related