LESS add class with pseudo selector

Question

I am using LESS and here is my example:

.arrow{ color: red; } .arrow:before{ content: ">"; } .button{ background: blue; .arrow; &:before{ border: 1px solid; } } 

And this is the CSS after parsing:

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

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

Answer 1

You can use the extend option as shown below. It basically applies all the properties of the arrow class to the button class. The keyword all means that 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: ">"; } 

Answer 2

I think the Extend function should do the trick:

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

See http://lesscss.org/features/#extend-feature