How to apply concatenated classes within another class using Less?

Question

Let's say I have the following Less setup:

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

If I wanted to declare another class which applied the full style of .box.error, as .error-box for example, what's the correct syntax?

If I use:

.error-box {
 .box.error;
}

All I get is the red background, with no border. I've tried many different combinations, but I always get a syntax error.

Answer 1

I plugged in your less as so:

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

.error-box {
    .box;
}

and the CSS output was this:

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

were you wanting the .error-box class to alone receive both styles? The only way I can think of doing that would be:

.error-bg {
    background:red;
}

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

.error-box {
    .box;
    .error-bg;
}