CSSで変数使えるらしいよ？ | 長期有給インターン生の日常|株式会社ガーディアン | 初期無料サブスク型のホームページで成果を上げる東京のガーディアン

CSSで変数が使えること、知っていましたか？

こんにちは、WEｂプログラマーコースの池田駿です。

本日CSSを使って書いたコードを提出したのですが、

提出した上司と私のパソコンの画面の大きさが違い、

「あれ？なんかここの幅違くない？」というハプニングが発生。

時間かけて作ったのに...

と思いつつ、全部値を直すことにしたのですが、

この問題ってこれからも起こりうるよなと思って

C言語でいうマクロみたいなものないのかなと思って調べてみました。

使い方：

まず正しい名前はカスタムプロパティです。

マクロとして使うなら方法は超簡単。

CSSファイルの最初に

:root{

    --main-width: 85%;
    --sub-width:100px;

    --main-color:#000;

}

のような形式で定義します。（宣言も同時にしてるのかな？）

使い方も簡単。

使いたいところで

.box{

    width: var(--main-width);

    color: var(main--color);

}

といった感じで使います。

今回のようなケースでなくても、急な仕様変更

にも笑顔で対応するのが我々エンジニアの道！

なので、仕様変更を見越して何回も使う値は

ぜひ変数に格納してしまって使いまわしましょう♪

それでは！

参考文献：https://www.webcreatorbox.com/tech/css-variables