&(親セレクタの参照)

.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. &を使って親セレクタを参照しよう */
      }
    }
  }
}


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

Sassとは

ネスト（入れ子）

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

$(変数)

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

Sassを導入し、CSSのコーディングをより効率的に。変数やmixinなどの機能を利用し、記述をシンプルに保ちながらスタイルを強化します。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【Sass編📝】効率的なスタイル管理と実践

「Sassで時間短縮！効率的にコーディングしよう」レッスンの総復習クイズです。