2

I want to dynamicaly call .some-mixin() with some colors. This mixins should generate some styles, and when the colors are equals the special code should be generated.

Due to comprimation of final css code I want to do it by help variable, where can I store classes for the special code.

Maybe sample code will be more helpful:

.some-mixin(@newClass,@color,@color2){
      .test-mixin(@newClass,@color,@color2);
      .@{newClass}{
         color: @color;
      }
}

@classes: '';
.test-mixin(@newClass,@color,@color2) when (@color = @color2){
    @classes: "@{classes}, @{newClass}";
}
.final-mixin(){
    .@{classes}{
        /*some styles*/
    }
}

The call of mixins is generated by PHP and final code should looks like this:

.some-mixin("abc",#ffffff,#000000);
.some-mixin("xyz",#ffffff,#ffffff);
.some-mixin("jkl",#ff00ff,#ff00ff);
.final-mixin();

But when I want compile the LESS it shows infinite loop detected

Is this possible in LESS?

Any advice will be helpul.

8
  • Oh sorry I had there with instead of when. Now it should be fully LESS code. Commented Jan 29, 2015 at 13:11
  • 1
    Not just that mate. The variables with $. I have never seen them used in Less before. If I correct all of them, the mixin and the calls work perfectly fine (when compiled using lesstester.com) Commented Jan 29, 2015 at 13:13
  • Yes, I'm stupid or something. It's deformation from PHP :) Commented Jan 29, 2015 at 13:14
  • The .test-mixin and .final-mixin seem to be a case where the extend function could be used. Maybe in addition to your current code, could you also explain what is your original requirement? It might help to see if there are better ways of doing it. Commented Jan 29, 2015 at 13:43
  • 1
    Ok, now I see why you got the infinite loop message. You cannot do @classes: "@{classes}, @{newClass}"; in Less (unless using some hacks). It is a recursive variable definition. Commented Jan 29, 2015 at 15:33

1 Answer 1

2

As explained in comments, your problem is the recursive variable definition in the below line. Less does not support this as explained in this answer and this one.

@classes: "@{classes}, @{newClass}";

Based on your requirement explanation in comments (that there would be some extra padding etc when the colors are different), you could use one of the below methods.

Option 1: (will add the padding to every class and so repeated code)

.some-mixin(@newClass,@color,@color2){
      .@{newClass}{
         color: @color;
         & when not (@color = @color2){
            padding: 4px;
        }
      }
}

.some-mixin(abc,#ffffff,#000000);
.some-mixin(xyz,#ffffff,#ffffff);
.some-mixin(jkl,#ff00f0,#ff00ff);

The above Less would compile into below CSS:

.abc { 
  color: #ffffff;
  padding: 4px; /* colors were different */
}
.xyz {
  color: #ffffff;
}
.jkl {
  color: #ff00f0;
  padding: 4px; /* colors were different */
}

Option 2: (uses a dummy class + extend and so lesser code)

This option is probably what you are looking for as it avoids code repetition. We cannot extend a mixin and hence we use a dummy class. This should not be a big concern because it just adds one extra line to output CSS.

.common-padding-diff-color{ /* all styles that are needed when colors are different */
    padding: 4px;
}
.some-mixin(@newClass,@color,@color2){
      .@{newClass}{
         color: @color;
         & when not (@color = @color2){
            &:extend(.common-padding-diff-color);
        }
      }
}

.some-mixin(abc,#ffffff,#000000);
.some-mixin(xyz,#ffffff,#ffffff);
.some-mixin(jkl,#ff00f0,#ff00ff);

This would compile into

.common-padding-diff-color,
.abc,
.jkl {
  padding: 4px; /* style applied for all cases where colors are not same */
}
.abc {
  color: #ffffff;
}
.xyz {
  color: #ffffff;
}
.jkl {
  color: #ff00f0;
}
Sign up to request clarification or add additional context in comments.

1 Comment

@DzeryCZ: Glad to be of help mate. Please mark the answer as accepted (click on that hollow tick mark below the voting area) if you have no concerns.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.