CSS - LESS sınıfı kalıtım

Question

twitter bootstrap stillerini kullanıyorum ve kalıtım hakkında bir sorunuz var.

Etiket stillerinden önyükleme yapabilen iki etiket sınıfı oluşturmak istiyorum.

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

Ancak, yukarıda AZ ayrıştırma hatası neden olur "NameError: .label önemli tanımsız":

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

.label önemli ve .label uyarı bootstrap aşağıdaki kullanılarak tanımlanır çünkü

.label-önemli/uyarılarını devralmak için özel bir sözdizimi var mı?

Şimdiden teşekkürler.

Answer 1

Ben sadece (updated için ve dengi) .label-new-important ve .label-new-warning vermelidir .label devralabilir düşünüyorum. Bu arzu edilmezse ve yeni eklenen eklentiler istiyorsanız, muhtemelen ne istediğinizi yalıtmak ve tanımlamak için renkleri doğrudan .label için tanımlamanız gerekir. böylece gibi:

renklerin yeniden tanımlanmasına önlemek için (bir mixin renkleri yeniden tanımlamak ancak kullanmak istemiyorsanız)

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

DÜZENLEME

, o zaman orijinal tanımını değiştirmek gerekir ve bunu:

Birincisi, bu yüzden gibi daha bunları açıkça tanımlamak, ikinci özgün .label ve .badge tanımlarını silin ve:

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