.container {
  width: 100%;

  ul {
    display: flex;

    li {
      padding: 10px;
      list-style: none;

      a {
        color: #333;
        /* 問題1. &を使って親セレクタを参照しよう */
        &:hover {
          color: #ffb6c1;
        }
      }
    }
  }
}


&(親セレクタの参照)

.container {
  width: 100%;

  ul {
    display: flex;

    li {
      padding: 10px;
      list-style: none;

      a {
        color: #333;
        /* 問題1. &を使って親セレクタを参照しよう */
      }
    }
  }
}


親セレクタを一文字で簡単に参照しよう

ネスト（入れ子構造）でコードをすっきりさせよう

変数を使って好きな色を呼び出してみよう

SCSSを使用するメリットを学び、効率的なコーディングスキルを身につけます。


親セレクタを一文字で簡単に参照しよう

まずは必要なスキルを確認しましょう！