「意味的に」入れ子になっているタグとクラス

Question

semantic cssクラスをSassにネストしています。私は、セクションのCSSコードをセクションでのみ使用できるようにして、セマンティクスのある場所で<section />タグが使用されていることを確認します。

しかし私は&を私のSassファイルで使用することで問題を抱えています。

section { 
    &.section-home { 
    background-color: white; 
    &__heading { 
     font-size: 5rem; 
    } 
    &__intro { 
     color: grey; 
    } 
    } 
} 

サスには、以下のCSSにそれをレンダリング：：私はサスに次のコードを使用することができ想定し、ないでしょう

<section class="section-home"> 
    <h1 class="section-home__heading">Section heading</h1> 
    <p class="section-home__intro">This is some random text</p> 
</section> 

：次のHTMLを考えてみません

section.section-home{background-color:#fff} 
section.section-home__heading{font-size:5rem} 
section.section-home__intro{color:grey} 

そして、それは私が期待しているか必要としているものではない、私は欲しい：

section.section-home{background-color:#fff} 
section.section-home .section-home__heading{font-size:5rem} 
section.section-home .section-home__intro{color:grey} 

これはバグですか？私はここで何か間違っていますか？

Answer 1

だけにCSSを変更します。これは、Yを解決する

section.section-home

section.section-home .section-home__heading

section.section-home .section-home__intro

Answer 2

：サスはこれを解釈する

section { 
    &.section-home { 
    background-color: white; 

    .section-home { 
     &__heading { 
     font-size: 5rem; 
     } 
     &__intro { 
     color: grey; 
     } 
    } 
    } 
} 

この道をhtmlタグで既に制限されている場合には単に ".home"と呼ぶことができます。

section { 
    &.section-home { 
    background-color: white; 

    .section-home__heading { 
     font-size: 5rem; 
    } 

    .section-home__intro { 
     color: grey; 
    } 
    } 
}