SCSSで入れ子構造にすると、背景色や文字色が反映されない

Question

SCSSについて、背景色や文字色が反映されないので教えてください。
基本の文字色を黒として、

$FontPink: #ff8780;
$LightPink: #fff1e9;

article {
        h1 {
            height: 60px;
            vertical-align: middle;
            font-size: 60px;
            span {
                font-size: 32px;
                vertical-align: 25%;
            }
        }
        .pink {
            .bg {
                background-color: $LightPink;
            }
            h1, h1 span {
                color: $FontPink;
            }
        }
}

とSCSSで下記、コンバート後は下記になりました。

article {
    article h1 {
      height: 60px;
      vertical-align: middle;
      font-size: 60px; }
      article h1 span {
        font-size: 32px;
        vertical-align: 25%; }
    article .pink .bg {
      background-color: #fff1e9; }
    article .pink h1, article .pink h1 span {
      color: #ff8780; }

HTMLがこうなっているのですが、divの背景色やh1の文字色が反映されません。

<article class="pink">
  <h1>01｜<span>サンプル</span></h1>
    <div class="bg">
      サンプルです。<br>
      サンプルな感じです。<br>
    </div>
</article>

背景色や文字色を反映させるにはどのようにすれば良いでしょうか？

articleのclass名を”pink”としていますが、これを"green"に変更すると、背景色やh1の文字色も緑系統に変わる……という風にCSSを整頓したいと思っています。

よろしくお願いします。

Answer 1

下記の修正をしてください。

-        .pink {
+        &.pink {

コンパイル後は、

-      article .pink .bg {
+      article.pink .bg {

article .pink だと article の子孫要素のpinkクラスという意味になります。

article.pink で article要素でpinkクラスのついたものということです。

Comments

[ErioYsd]

解決しました！　本当にありがとうございました！

Answer 2

.pink の前に & を入れると良いかと思います。

        &.pink {
            .bg {
                background-color: $LightPink;
            }
            h1, h1 span {
                color: $FontPink;
            }
        }

現状はコンバートすると...

article .pink .bg {
      background-color: #fff1e9; }

「article の子要素で .pink の子孫要素 .bg の background-color を指定」している記述になっていますが、上記のscssのようにすると以下のように
「article かつ pink クラスを持っている、の子孫要素の .bg の background-color を指定」する記述となります。

article.pink .bg {
      background-color: #fff1e9; }

article と .pink の間のスペースある無しでセレクタの意味が変わります。

Comments

[ErioYsd]

丁寧な解説まで含めありがとうございました！