2013-06-03 16 views
8

:LESS - Birden çok sınıf yazmayı kaydetmek için çoklu seçicileri birbirine bağlayabilir misiniz? Bunun yerine bu yazı

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

nihai seçici sonra, ana seçicinin olarak sınıflar kümesi tanımlamak değiştirmek için bir yolu var mı?

şey gibi:

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

cevap

12

kullanın 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 değişkeni, önceki derler için ilan eden sonra)
İlgili konular