$(変数)

/* 問題1. 変数を宣言してみよう */
$mainColor: #ffb6c1;

.container {
  width: 100%;
  h1 {
    /* 問題2. 宣言した変数を呼び出そう */
    color: $mainColor;
  }
  ul {
    display: flex;
    padding-left: 0;
    li {
      margin-right: 10px;
      list-style: none;
      &:last-child {
        margin-right: 0;
      }
      a {
        color: #333;
        &:hover {
          /* 問題2. 宣言した変数を呼び出そう */
          color: $mainColor;
        }
      }
    }
  }
  .buttons {
    button {
      /* 問題2. 宣言した変数を呼び出そう */
      background-color: $mainColor;
      color: #fff;
      border: 0;
      padding: 4px 8px;
    }
  }
}


/* 問題1. 変数を宣言してみよう */

.container {
  width: 100%;
  h1 {
    /* 問題2. 宣言した変数を呼び出そう */
  }
  ul {
    display: flex;
    padding-left: 0;
    li {
      margin-right: 10px;
      list-style: none;
      &:last-child {
        margin-right: 0;
      }
      a {
        color: #333;
        &:hover {
          /* 問題2. 宣言した変数を呼び出そう */
          color: #ffb6c1;
        }
      }
    }
  }
  .buttons {
    button {
      /* 問題2. 宣言した変数を呼び出そう */
      background-color: #ffb6c1;
      color: #fff;
      border: 0;
      padding: 4px 8px;
    }
  }
}


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

Sassとは

ネスト（入れ子）

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

&(親セレクタの参照)

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

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

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

Web制作コース

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

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