Search code examples
lessmixins

LESS: 2 mixins with same properties


In CSS if I want to have two classes with the same properties, I can write the following:

.class1,
.class2
{
  color:red;
}

I wish to obtain the same result for LESS Mixins, but the following code is not allowed:

.mixin1(),
.mixin2()
{
  color:red;
}

Is there a way to formally "create a mixin duplicate"?


Solution

  • Following seven-phases-max's suggestion, I can provide a more detailed answer:

    Simpler (original) solution:

    .class1
    {
      color:red;
    }
    
    .class2 
    {
      .class1;
    }
    

    that compiles into:

    .class1 {
      color: red;
    }
    .class2 {
      color: red;
    }
    

    Alternatively is possible also to set an hidden mixin thanks to () after its name, used as transition step:

    .hidden-mixin()
    {
      color:blue;
    }
    
    .class1,
    .class2
    {
      .hidden-mixin();
    }
    

    that compiles into:

    .class1,
    .class2 
    {
      color: blue;
    }