Làm cách nào để áp dụng các lớp được kết hợp trong một lớp khác bằng Less?

Question

Chúng ta hãy nói rằng tôi có ít thiết lập sau:

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

Và tôi muốn tuyên bố một lớp học mà áp dụng đầy đủ phong cách của .box.error, như .error-box ví dụ, cú pháp chính xác là những gì?

Nếu tôi sử dụng:

.error-box { 
.box.error; 
} 

Tất cả tôi nhận được là nền đỏ, không có biên giới. Tôi đã thử nhiều kết hợp khác nhau, nhưng tôi luôn nhận được lỗi cú pháp.

Answer 1

tôi cắm vào của bạn ít hơn như vậy:

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

.error-box { 
    .box; 
} 

và đầu ra CSS là thế này:

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

được bạn muốn lớp .error-box để mình nhận được cả phong cách? Cách duy nhất tôi có thể nghĩ về việc đó là:

.error-bg { 
    background:red; 
} 

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

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