How to apply concatinated classes in another class using Less?

Question

Suppose I have the following setting below:

.box { border: 1px solid #333; &.error { background-color: Red; } } 

And I wanted to declare another class that applied the full style of .box.error, for example .error-box , what is the correct syntax?

If I use:

 .error-box { .box.error; } 

All I get is a red background, no frame. I tried many different combinations, but always get a syntax error.

Answer 1

I connected to you less:

 .box { border: 1px solid #333; &.error { background-color:red; } } .error-box { .box; } 

and the CSS output was as follows:

 .box { border: 1px solid #333; } .box.error { background-color: red; } .error-box { border: 1px solid #333; } .error-box.error { background-color: red; } 

Do you want the .error-box class to receive both styles? The only way I can do this is:

 .error-bg { background:red; } .box { border:1px solid #333; &.error { .error-bg; } } .error-box { .box; .error-bg; }