CSS - LESS class inheritance

Question

Tôi đang sử dụng các kiểu từ twitter bootstrap và có câu hỏi về kế thừa.

Tôi muốn tạo hai lớp nhãn kế thừa kiểu nhãn từ bootstrap.

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

Tuy nhiên, ở trên sẽ gây ra lỗi phân tích cú pháp ÍT "NameError: .label-quan trọng là xác định" vì .label quan trọng và .label cảnh báo được định nghĩa bằng cách sử dụng sau đây trong 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%); } 
} 

Có cú pháp đặc biệt nào để kế thừa .label-important/warning không?

Xin cảm ơn trước.

Answer 1

Tôi nghĩ rằng bạn chỉ có thể kế thừa .label sẽ cung cấp cho .label-new-important và .label-new-warning (và tương đương cho updated). Nếu đó không phải là mong muốn, và bạn muốn mở rộng thêm mới, bạn có thể cần phải xác định lại màu sắc trực tiếp cho .label để cô lập và xác định những gì bạn muốn. Cũng giống như vậy:

.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 (Nếu bạn không muốn để xác định lại các màu sắc nhưng sử dụng một mixin)

Để tránh một xác định lại của màu sắc, thì bạn cần phải thay đổi định nghĩa ban đầu, và thực hiện điều này:

thứ nhất, xóa bản gốc .label và .badge định nghĩa, và sau đó thứ hai, định nghĩa chúng một cách rõ ràng hơn như vậy:

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