Daha az kullanarak başka bir sınıfta uyumlu sınıflar nasıl uygulanır?

Question

Let' Ben şu Az kurulum var ki:

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

Ve örneğin .error-box olarak, .box.error tam tarzını uygulanan başka sınıf bildirmek istedik, doğru sözdizimi nedir?

Ben kullanıyorsanız:

.error-box { 
.box.error; 
} 

ı get hiçbir kenarlıklı, kırmızı bir arka plandır. Birçok farklı kombinasyon denedim, ancak her zaman sözdizimi hatası alıyorum.

Answer 1

ben takılı senin daha az olarak:

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

.error-box { 
    .box; 
} 

ve CSS çıkış şuydu:

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

yalnız için .error kutusu sınıfını isteyen her iki stilleri almak? Bunu yapmayı düşünebilmemin tek yolu şu olurdu:

.error-bg { 
    background:red; 
} 

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

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