2013-06-03 13 views
8

而不是寫這個的:LESS - 您可以將多個選擇器鏈接在一起以節省寫入多個類嗎?

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

有沒有一種方法來定義一組類爲主要選擇,然後改變最終選擇?

喜歡的東西:

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

回答

12

使用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(); 
} 

.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; 
} 
(聲明 @orange變量,以前編譯後)
相關問題