¿Cómo aplicar clases concatenados dentro de otra clase con menos?

Question

Vamos a decir que tengo la siguiente configuración Menos:

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

y quería declarar otra clase que aplica el estilo lleno de .box.error, como .error-box por ejemplo, ¿cuál es la sintaxis correcta?

si uso:

.error-box { 
.box.error; 
} 

Todo lo que consigo es el fondo rojo, sin frontera. He probado muchas combinaciones diferentes, pero siempre obtengo un error de sintaxis.

Answer 1

I enchufado en su menor como tan:

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

.error-box { 
    .box; 
} 

y la salida de CSS fue la siguiente:

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

se le queriendo la clase .Error caja a solo reciben ambos estilos? La única forma en que puedo pensar en hacer eso sería:

.error-bg { 
    background:red; 
} 

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

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