CSS-Az sınıf sözde sınıfı ile sınıf uzatmak

Question

ben az css ile aşağıdaki gibi bir şey yapabileceğini merak ediyorum

: Bu eğer orada işaret etmek gerekenler sadece bir örnek, Of-kurs

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.btn-foo { 
    .btn; 
    &:hover { 
    .btn:hover; 
    } 
} 

İhtiyaç duyduğum her yerde :hover sözde sınıfının özelliklerini yeniden yazmaktan kaçınmak için sözde sınıfını genişletmenin herhangi bir yoludur. Bunun için bir karışma yaratabileceğimi biliyorum ama bunu önleyebilir miyim diye merak ediyorum.

Teşekkür

Answer 1

GÜNCELLEME: Harici dosyalarda değişiklik yapamaz , sadece seçicileri yeniden tanımlamak ve eksik durumlarını ekleyin: Şimdi

.btn { 
    // not adding anything here, won't affect existing style 
    &:hover { 
    // adding my own hover state for .btn 
    background: yellow; 
    ... 
    } 
} 

// this will make your foo button appear as in external style 
// and have the :hover state just as you defined it above 
.btn-foo { 
    .btn; 
} 

iyi? :)

---

Sen sözde sınıfını gerekmez. Sadece çalışacaktır :)

bu deneyin:

.btn { 
    background: yellow; 

    &:hover { // define hover state here 
    background: green; 
    } 
} 

button { 
    .btn; 
} 

gelme durumuna dahil tanımlandı her ne devralır Oluşturduğunuz her öğesi. Bence LESS'in en şaşırtıcı özelliklerinden biri.

Bu yardımcı olur umarım. Az 1.4.0 yılında

Answer 2

Bu (1.4.1?):

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.btn-foo:extend(.btn all) { 
} 

bu genişler:

.btn, 
.btn-foo { 
    color: black; 
} 
.btn:hover, 
.btn-foo:hover { 
    color: white; 
} 

olsa dikkatli olun, bu:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

.btn-foo:extend(.btn all) { 

} 

Bunu verecek:

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

.abc .btn { 
    margin: 2px; 
} 

.btn-foo:extend(.btn all) { 

} 

SASS'e yarım saatten fazla bakmadım, ancak sonraki durumun varsayılan (veya yalnızca) @extend davranışı olduğuna inanıyorum.