CSSで変数を使う方法

SassやLESSなどではお馴染みですが、普通のCSSでも変数が使えるようになっておりました。今日まで知らなかったですが、簡単に使えるようなので紹介します。プログラムの世界では変数は当たり前に使うので、そんな考え方がCSSでも使えるなら超便利ですよね。

CSS変数の使い方

変数を定義する

とにもかくにも変数を定義しないと始まらないので、まずは変数を定義します。

各セレクタに定義する事も可能ですが、:rootに定義する事でグローバル変数的な使い方が可能です。変数の宣言は「–」という具合にハイフン2つで始め、その後に変数名を記載します。例えばこんな具合。

:root {
  --base_margin: 15px;
  --base_position: center;
  --base_lineheight: 1.5em;
}

定義した変数を呼び出して使う

実際に使用する箇所で、var(–変数名）と記載してあげると定義した値を呼び出す事が出来ます。例えばこんな具合。

:root {
  --base_margin: 15px;
}

.text_area {
  width: 500px;
  margin: var(--base_margin);
}

上記の例だと.text_areaという要素にmargin: 15px;が適用されるわけですね。

簡単、便利ですよね。この便利さがいまいちわかんないなぁという方は一度css破綻地獄に陥ってみるとよくわかると思います。

ではまた。

Web

Posted by demoya