CSSで変数を使う方法

こんにちはmacoです。

CSSでカラーコードや数値など、よく使う値を変数にすることができたら便利ですよね。
この記事では、CSSで変数を使う方法を紹介します。

変数の定義方法

変数はCSS内で次のように定義します。

:root{
    --site-color: #000000;
}

.hoge{
    --hoge-margin: 20px;
}

ここで2種類紹介したのは、変数の有効範囲（スコープ）があるためです。

スコープとは、その変数が使える範囲のことです。
スコープは、CSSのセレクタで決まります。

上の例では前者はroot、つまりHTML内のすべての要素で–site-colorという変数が使用できるわけですが、後者は、.hogeという限られた要素内でのみ–hoge-marginという変数を使用することができます。

定義した変数を実際に使うには、次のように記述します。

.button{
    background: var(--site-color);
}

.hoge{
    margin-bottom: var(--hoge-margin);
}

var()の中に上で定義した変数を入れるだけなので、とても簡単ですね。

変数を使えばコードの無駄が減り、作業も早く正確に進める事ができます。
そうやって空いた時間を使って、他の新しいことを学べば成長速度も上がると思います。
みなさんもぜひ使ってみてください！