CSS - LESS class inheritance

Question

Estoy usando los estilos de twitter bootstrap y tengo una pregunta acerca de la herencia.

Me gustaría hacer dos clases de etiquetas que heredarían los estilos de etiqueta de la rutina de arranque.

.label-new { 
    .label; .label-important; 
} 
.label-updated { 
    .label; .label-warning; 
} 

Sin embargo, lo anterior se traduciría en error de análisis menos "NameError: .label-importante es indefinido" porque .label-importante y .label de alerta se definen mediante la siguiente en bootstrap:

.label, 
.badge { 
    // Important (red) 
    &-important   { background-color: @errorText; } 
    &-important[href] { background-color: darken(@errorText, 10%); } 
    // Warnings (orange) 
    &-warning   { background-color: @orange; } 
    &-warning[href]  { background-color: darken(@orange, 10%); } 
} 

¿Hay alguna sintaxis especial para heredar el .label-important/warning?

Gracias de antemano.

Answer 1

creo que sólo se puede heredar el .label que debe dar .label-new-important y .label-new-warning (y equivalente para updated). Si eso no es deseable, y desea nuevas extensiones agregadas, probablemente necesite volver a definir los colores directamente para el .label para aislar y definir lo que desea. De este modo:

.label { 
    // New (red) 
    &-new   { background-color: @errorText; } 
    &-new[href]  { background-color: darken(@errorText, 10%); } 
    // Updated (orange) 
    &-updated  { background-color: @orange; } 
    &-updated[href] { background-color: darken(@orange, 10%); } 
} 

EDITAR (Si no desea volver a definir los colores pero el uso de un mixin)

Para evitar una redefinición de los colores, entonces usted necesita para cambiar la definición original, y hacer esto:

En primer lugar, eliminar los originales .label y .badge definiciones, y luego en segundo lugar, definir más explícitamente como tal:

.label-important, 
.badge-important { 
    // Important (red) 
    { background-color: @errorText; } 
    { background-color: darken(@errorText, 10%); } 
} 

.label-warning, 
.badge-warning { 
    // Warnings (orange) 
    { background-color: @orange; } 
    { background-color: darken(@orange, 10%); } 
} 

.label-new { 
    .label-important; 
} 

.label-updated { 
    .label-warning; 
}