SCSS. Referans ikinci seviye artan seçici

Question

Çarpışmaların önlenmesi kapsamında sınıfları organize etme tekniklerinden biri, bir ebeveynin sınıfını genişletmek + bir sonek eklemektir.

.a{ 
&__b{} 
&__c{} 
&__d{} 

: - Örneğin: yapısı böyle sağlanabilir yukarıda böylece, &

küstahlık/SCSS dosyalarında, kod çoğaltma değil hususlar itibaren

<div class="a"> 
    <div class="a__b"> 
    <div class="a__c"> 
    <span class="a__d"> 

, tek bir ve işareti yardımıyla bir üst başvurabilir

.a__b {} 
.a__c {} 
.a__d {} 

Ama zorluklar bir sonucu olarak böyle bir css almak gerektiğinde görünür: içine transfomed edilir

.a:hover{ 
    color: red; 
} 
.a:hover .a__b{ 
    color: blue; 
} 

Ana fikir seçicilerin çoğaltılması değil, bir soru ortaya çıkıyor - ikinci düzey ana öğeye başvurmanın bir yolu var mı? &&'un bir sorun olmadığını biliyorum, ancak ikili ampersan davranışı simüle etmenin bir yolu var mı?

.a{ 
    &:hover{ 
     color: red; 
     & __b { /* & -> .a:hover, but I need just .a */ 
      color: blue; 
     } 
    } 

} 

değil bir sorun, .a yineleniyor: Ayrıca

.a:hover { //here 
    color: red; 
    .a__b { //here 
    color: blue; 
    } 
} 

değil bir sorun:

.a { //ok 
    &:hover { 
    color: red; 

    .a__b { //oops, duplicated selector 
     color: blue; 
    } 
    } 
} 

Yani, çarpışmalar sınıfları var birçok kez kaçınma düşüncelerden uzun isimler. Yinelenen seçmenler kodun korkutucu görünmesidir. Düşünün, .a seçicisinin yerine şu: .custom-layers-list-panel-conatiner. Yinelenen sınıflardan kaçınmanın bir başka nedeni, ebeveyn sınıfı değiştiğinde, her yerde değiştirilmelidir. Evet, günümüzde bazı özel araçlarla oldukça önemsiz bir görev ama yine de hataların ortaya çıkabileceği bir yer.

Answer 1

Güncelleme: Orijinal

.a{ 
    $grandparent: &; 

    &:hover{ 
     color: red; 
    & #{$grandparent}__b { 
      color: blue; 
     } 
    } 
} 

ve Orijinal daha iyi:

@function r-pseudo($s) { 
    $string: nth(nth($s, 1), 1); 
    @return str-slice($string, 0, str-index($string, ':') - 1); 
} 

.a{ 
    &:hover{ 
     color: red; 
    & #{r-pseudo(&)}__b { 
      color: blue; 
     } 
    } 
} 

hem üretmek

.a:hover { 
    color: red; 
} 
.a:hover .a__b { 
    color: blue; 
} 

Answer 2

Fikriniz haklıydı, ancak istediğinizi elde etmek için en üst seviyeye getirin. İstediğiniz şey değil, ama SCSS'nin size hedef sonucunuzu vermesinin tek yolu.

.a:hover { 
    color: red; 
    .a__b { 
    color: blue; 
    } 
} 

İkinci deneyin, örneğin:

Ben bunu arıyordunuz düşünüyorsun?

.a { 
    &:hover { 
    color: red; 

    .a__b { 
     color: blue; 
    } 

    } 
}