2つの異なる親クラスを持つ同じ子供をターゲットにする

Question

私はSASSを使って自分のCSSファイルを書いています。 私は2つの異なる親クラスを持っていますが、この2つの親クラスは同じ子クラスを持っています。だから私は、このCSSコードの私のSCSSツリーを構築したい：

#header { 
    position: relative; 
    width: 100%; 
} 

#header-g { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 300; 
    width: 100%; 
} 

#header .l-header-top, #header-g .l-header-top { 
    height: 55px; 
    line-height: 50px; 
    border-top: 5px solid #474747; 
    background-color: #f0f1f3; 

    font-size: 16px; 
} 

私はこれを試してみましたが、私は私が何かを忘れて考える：あなたが使用している場合は、

#header { 
    position: relative; 
    width: 100%; 

    &#header-g { 
     position: fixed; 
     top: 0; 
     left: 0; 
     z-index: 300; 
     width: 100%; 

     .l-header-top { 
      height: 55px; 
      line-height: 50px; 
      border-top: 5px solid #474747; 
      background-color: #f0f1f3; 

      font-size: 16px; 
     } 
    } 
} 

おかげで、あなたのコードで

Answer 1

を&は、それらが同じ要素にあり、単一の要素に1つのIDしかないことを意味します。その状況でclassを使用する必要があります。

#header { 
    position: relative; 
    width: 100%; 

    &#header-g { 
     position: fixed; 
     top: 0; 
     left: 0; 
     z-index: 300; 
     width: 100%; 

ただし、これは次のようなものです。 #headerと#header-gestionはあなたのIDの親ですが、同じ子供の子は.l-header-topです。

#header { 
    position: relative; 
    width: 100%; 
    .l-header-top { 
     height: 55px; 
     line-height: 50px; 
     border-top: 5px solid #474747; 
     background-color: #f0f1f3; 

     font-size: 16px; 
    } 
} 

#header-g { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 300; 
    width: 100%; 
    .l-header-top { 
     height: 55px; 
     line-height: 50px; 
     border-top: 5px solid #474747; 
     background-color: #f0f1f3; 

     font-size: 16px; 
    } 
} 

それとも、クラスの命名規則にBEM方法論に基づいており、このように&を使用しています。 BEM — Block Element Modifier Methodology

#header { 
    position: relative; 
    width: 100%; 
    &-g { 
     position: fixed; 
     top: 0; 
     left: 0; 
     z-index: 300; 
     width: 100%; 
    } 
} 


#header, 
#header-g { 
    .l-header-top { 
     height: 55px; 
     line-height: 50px; 
     border-top: 5px solid #474747; 
     background-color: #f0f1f3; 
     font-size: 16px; 
    } 
}