CSS - LESS class inheritance

Question

I'm using the styles from twitter bootstrap and have a question about inheritance.

I'd like to make two label classes that'd inherit the label styles from bootstrap.

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

However, the above would result in LESS parse error "NameError: .label-important is undefined" because .label-important and .label-warning are defined using the following in 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%); }
}

Is there any special syntax to inherit the .label-important/warning?

Thanks in advance.

Answer 1

I think you can only inherit the .label which should give .label-new-important and .label-new-warning (and equivalent for updated). If that is not desireable, and you want new added extensions, you probably need to define the colors again directly for the .label to isolate and define what you want. Like so:

.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%); } 
} 

EDIT (If you don't want to redefine the colors but use a mixin)

To avoid a redefining of the colors, then you need to change the original definition, and do this:

First, delete the original .label and .badge definitions, and then second, define them more explicitly like so:

.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;
}