2013-06-03 28 views
8

Thay vì viết này:LESS - Bạn có thể kết nối nhiều bộ chọn với nhau để lưu nhiều lớp không?

.class-one .class-two h2, .class-one .class-two h3, .class-one .class-two h4, 
.different-class-one .different-class-two h2, .different-class-one .different-class-two h3, .different-class-one .different-class-two h4 
.another-class-one .another-class-two h2, .another-class-one .another-class-two h3, .another-class-one .another-class-two h4 
{ 
    background-color: @orange; 
} 

Có cách nào để xác định một tập các lớp như bộ chọn chính, sau đó thay đổi bộ chọn cuối cùng?

Cái gì như:

.class-one .class-two h2/h3/h4, 
.different-class-one .different-class-two h2/h3/h4, 
.another-class-one .another-class-two h2/h3/h4 
{ 
    background-color: @orange; 
} 

Trả lời

12

Sử dụng một mixin:

.header-template() { 
    h2, h3, h4 { 
     background-color: @orange; 
    } 
} 

.class-one .class-two, 
.different-class-one .different-class-two, 
.another-class-one .another-class-two { 
    .header-template(); 
} 

(sau khi tuyên bố @orange biến, biên dịch trước đó)

.class-one .class-two h2, 
.different-class-one .different-class-two h2, 
.another-class-one .another-class-two h2, 
.class-one .class-two h3, 
.different-class-one .different-class-two h3, 
.another-class-one .another-class-two h3, 
.class-one .class-two h4, 
.different-class-one .different-class-two h4, 
.another-class-one .another-class-two h4 { 
    background-color: #ffa500; 
} 
Các vấn đề liên quan