変数

変数について
変数の使い方
変数のまとめ方
関連リンク

本ステップでは、ネスト、変数、演算、ミックスインなどのSCSSの追加機能を解説します。
これらの機能を活用することで、コーディングの効率化やデザインの一貫性を向上させ、より洗練されたコードを書くことができます。

ぜひ、SCSSの追加機能を学び、実際にチャレンジしてみましょう。

変数について

変数とは？

変数は、値を再利用できるようにする仕組みです。
色やフォントサイズなどの値を一箇所にまとめて管理でき、変更が容易になります。
変数は「$」を使って定義します。

例えば、下記の様にのように使用できます。

$primary-color: #3498db;

color: $primary-color;

このように、$の後に名前を指定し、その名前に対応する値を記述します。

変数のポイント

変数は、色やフォントサイズなどの値を「名前をつけて保存」する機能です。
一度設定すれば、複数の場所で簡単に使えます。
値を変更したいときは、変数の中身を変えるだけで全体に反映されます。

変数の使い方

実際の例

CSSの場合

body {
  background-color: #f5f5f5;
  color: #333;
}

h1 {
  color: #333;
}

a {
  color: #333;
}

CSSでは、文字色#333を何度も記述する必要があります。

SCSSの変数を使用した場合

$main-color: #333; // 変数を定義

body {
  background-color: #f5f5f5;
  color: $main-color;
}

h1 {
  color: $main-color;
}

a {
  color: $main-color;
}

SCSSでは、$main-colorという変数を定義することで、色を一箇所で管理できるようになります。
これにより、デザインの変更が必要になった場合も、変数の値を変更するだけで対応可能です。

変数のまとめ方

変数の定義は、一箇所でまとめて行うのが基本で、これにより管理がしやすくなります。
そこで、:rootという特別なセクションを使って、色などの基本的な値を定義します。

:rootとは？

:rootは、ウェブページ全体で使用する設定を一元管理するためのセクションです。

ここに変数を定義することで、色やフォントなどの値を一度だけ設定し、ページ全体で再利用できます。
変更が必要な場合も、:root内での修正だけで、他の部分にも自動的に反映されるため、管理が容易になります。

:root内での変数定義の例

この例では、--primary-color、--secondary-color、--font-size、--font-family という変数を:root内で定義しています。これにより、カラーやフォントサイズなどを一元管理でき、変更が必要な場合は:root内の定義を修正するだけで、ページ全体に反映されます。

:root {
  --primary-color: #3498db;  /* メインカラー */
  --secondary-color: #2ecc71; /* サブカラー */
  --font-size: 16px;          /* 基本フォントサイズ */
  --font-family: 'Arial', sans-serif; /* フォント */
}

body {
  background-color: var(--primary-color);
  font-size: var(--font-size);
  font-family: var(--font-family);
}

h1 {
  color: var(--secondary-color);
}

ウェブサイト制作では、使用するフォントやカラーが限られているため、font-familyやカラーを:rootで定義しておくと、デザインの一貫性が保ちやすくなります。

以上が、「変数」についての説明でした。

次のステップで、「@mixin / @include」について説明していきます。