【CSS】初心者必見！CSS変数の使い方

変数とは

変数とは簡単に説明すると、データ(数や文字)を記憶しておく入れ物の事です。
一度に一つしかデータを入れておくことができません。

新しくデータを入れると、それまで入っていたデータは消えてしまいます。

変数には変数名を必ず命名し、中身がわかるような名前をつけるようにします。

変数には、プロジェクトのどこからでも利用できる「グローバル変数」と特定の範囲で利用できる「ローカル変数」があります。

CSS変数の定義

CSS変数を定義する場合は「 — 」（ハイフン）を使用します。

使用例は以下になります。

:root {
--black : #000 ;
}

上記の–blackの部分が変数名になります。

変数の説明でもした通り、変数名は必ずわかりやすい好き名前を命名する必要があります。

:rootは宣言することであらゆるところで使用できるグローバル変数になります。

:root {
  --blue: #0089A7;
  --red: #E83015;
  --orange: #FFB11B;
  --yellow: #F7D94C;
  --green: #227D51;
  --white: #fff;
  --gray: #ddd;
  --margin-top: 0;
  --margin-bottom: 30px;
  --text: center;
}

上記のように色だけではなく、様々な値を変数に入れることができます。

変数の呼び出し

//定義

:root {
--black : #000 ;
}

//呼び出し

.class{
color: var(--black) ;
}

上記のように変数を呼び出す際には、「 var(–変数名) 」という形式で呼び出します