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破綻地獄に陥ってみるとよくわかると思います。
ではまた。
ディスカッション
コメント一覧
まだ、コメントがありません