LESS: Declare same properties for 2 mixins

Question

In pure CSS if I want to declare the same property for 2 selectors, it's sufficient to separate these selectors with a comma such as:

#first_id,
.second_class
{
   color:red;
}

How can I make the same thing for 2 LESS Mixins declaration?

I would like to make something like this:

.generic_transition (@duration:1s),
.other_transition (@duration:1s)
{
  -webkit-transition:all @duration;
     -moz-transition:all @duration;
      -ms-transition:all @duration;
       -o-transition:all @duration;
          transition:all @duration;
}

But it does not run.... How to reach expected result? Thank you.

score 0 · Answer 1 · answered Dec 27 '13 at 17:50

0

You can add helper class for every mixin like this:

.other_transition (@duration:1s){
  .helper(@duration);
}

.generic_transition (@duration:1s){
  .helper(@duration); 
}

.helper(@duration){
  -webkit-transition:all @duration;
     -moz-transition:all @duration;
      -ms-transition:all @duration;
       -o-transition:all @duration;
          transition:all @duration;
}

answered Dec 27 '13 at 17:50

Slawa Eremin

5,264
18
28

In this way... You're suggesting to use a sort of "temp" mixin to solve my problems in 2 steps... Am I correct? – Luca Detomi Dec 27 '13 at 18:02
yes, i think, better to use only one mixin: .generic_transition (@duration:1s) or .other_transition (@duration:1s) – Slawa Eremin Dec 27 '13 at 18:11

score 0 · Answer 2 · edited May 23 '17 at 12:11

Similar to Slawa's answer, but slightly less code. Since one of your names for mixins is already .generic_transition, then this works and is clear that .other_transition uses the generic transition's code:

.generic_transition (@duration:1s) {
  -webkit-transition:all @duration;
     -moz-transition:all @duration;
      -ms-transition:all @duration;
       -o-transition:all @duration;
          transition:all @duration;
}

.other_transition (@duration:1s) {
    .generic_transition (@duration);
}

It is unclear, however, why you would want two mixins defined exactly the same, as your original question has. That makes sense for selectors, but not as much for mixins. I'm assuming you want to set up some "generic" code for transitions, and then have that applied "generically" to any "other" transition.

Also, while your question does not necessarily deal with transitions, since that is what you used as an example, then this answer may prove useful to you.

LESS: Declare same properties for 2 mixins

2 Answers2