Sassとは

ネスト（入れ子）

.container {
  width: 100%;
  /* 問題1. 親セレクタの中に子セレクタを入れ子にしよう */
  ul {
    display: flex;
    li {
      padding: 10px;
      a {
        color: #333333;
      }
    }
  }
}


.container {
  width: 100%;
  /* 問題1. 親セレクタの中に子セレクタを入れ子にしよう */
}


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

&(親セレクタの参照)

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

$(変数)

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

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

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

Web制作コース

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

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