SASS

Question

'daki hedef özellik değerleri

HTML ve SASS'imde özellik modülleri kullanıyorum çünkü bu çok mantıklı. SUKDÖ'nün böyle bir şey olmazdı

<article data-post="wrap feature"> 
    <h1 data-post="title feature">Feature title</h1> 
</article> 

<article data-post="wrap"> 
    <h1 data-post="title">Normal title</h1> 
</article> 

: Şu anda, böyle işaretlemeyi olabilir

[data-post] { 
    font-size: 15px; 
    color: black; } 

[data-post~="title"] { 
    font-size: 20px; } 

[data-post~="title"][data-post~="feature"] { 
    font-size: 30px; } 

Çalışıyor, ama yuva bunlara SUKDÖ'nün mümkün olmadığını merak ediyorum. Hepsi [data-post] için geçerlidir, bu yüzden içindeki özellikleri hedeflemek istiyorum.

[data-post] { 
    font-size: 15px; 
    color: black; 

    &[~="title"] { 
    font-size: 20px; } 

    &[~="title"]&[~="feature"] { 
    font-size: 30px; } 
} 

Bu koda daha KURU ve daha kolay, daha mantıklı olurdu/bakımını: I (besbelli çalışmaz) böyle bir şey hayal ediyorum.

Answer 1

Bu bilgi yakındır. Her seferinde çocuk seçicilerindeki öznitelik adını yeniden belirtmeniz gerekir. Sınıflar ve kimlikler tacking on an ending to the parent class ile kurtulabilir, ancak aynı fikri özniteliğinize uzatırsanız ikinci seçiciniz [data-post][~="title"] olur.

Yani: oraya almalısınız

[data-post] { 
    font-size: 10px; 

    &[data-post~="title"] { 
    font-size: 50px; 
    color: blue; 
    } 
} 

. http://jsbin.com/kazusamore/edit?html,css,js,output