LESS add class with pseudo selector

Question

I use LESS and here is my example:

.arrow{
   color: red;
}
.arrow:before{
   content: ">";
}

.button{
  background: blue;
  .arrow;
  &:before{
    border: 1px solid;
  }
}

And this is CSS after parsing:

.button{
   background: blue;
   color: red;
}
.button:before{
   border: 1px solid; // HERE IS NO  content: ">" !!!
}

How to add :before pseudo-element from .arrow class to my button?

Answer 1

You can use the extend option like below. It basically applies all properties of the arrow class to the button class also. The all keyword means the child classes are also extended.

LESS:

.button{
    background: blue;
    &:extend(.arrow all);
    &:before{
        border: 1px solid;
    }
}

Compiled CSS:

.arrow,
.button {
    color: red;
}
.arrow:before,
.button:before {
    content: ">";
}