CSSで変数を使うサンプル

CSSで変数を使うサンプルです。

サンプル	CSSで変数を使うサンプル
	数値の計算も可能

CSSで変数を使うサンプル

変数に値を設定

--変数名: 値

変数の設定は先頭にハイフンを2つ付けます。

変数を使用

var(--変数名)

変数を使用する場合は、varを付けて変数をカッコでくくります。

サンプル

<style>
  :root {
    --test-color: green;
  }
  .a1 {
    color: var(--test-color);
  }
</style>

<p class="a1">あいうえお</p>
<p style="background:var(--test-color)">かきくけこ</p>

3行目は、変数のtest-colorに値のgreenを設定しています。
6行目は、変数を指定しています。
10行目は文字の色が変わり、11行目は背景色が付きます。

以下のようになります。

数値の計算も可能

calcとあわせて計算もできます。

<style>
  :root {
    --test1: 50;
  }
  .a1 {
    border: 1px solid #000;
    width: calc(var(--test1) * 5px);
  }
</style>
<div class="a1">width</div>

7行目は、50*5で250pxの幅になります。

足し算

<style>
  :root {
    --test1: 50;
    --test2: 150;
  }
  .a1 {
    border: 1px solid #000;
    width:calc(var(--test1)*1px + var(--test2)*1px);
  }
</style>
<div class="a1">width</div>

8行目は、50px+150pxで200pxになります。
それぞれの変数のあとに*1pxとしています。