最近は毎日の様にshopifyのテーマをいじっているのですが、デフォルトのcssファイルに見慣れぬ書き方を見つけました。

.hoge {
  color: var(--blue);
}

の様に「color:」までは分かるのですがその後がなんじゃこりゃです。調べてみると、いつの間にかcssで変数が使える様になっていました。何年も前にcssで変数が使えたらどれだけ便利だろうと思ったことがあり、それから特に追いかけることもなく(要は勉強していなかったということなんですが)、2020年くらいからちらほら記事が見つかります。日常的に触っている方には当たり前すぎるのかもで恐縮ですが、自分メモ的にざっくりと例を以下。

//グローバル変数
:root {
  --pink: pink;
  --blue: blue;
  --blck: #000;
}
//変数で色指定
.hoge {
  color: var(--blck);
}

「:root」でグローバル変数を作って、「var()」で指定するだけ。超簡単。この流れで新しいcssの仕様について調べてみました。メディアクエリの定義付けや、クラスのを入れ子で記述が出来たりする(らしい)です。めっちゃ便利になった(ぽい)。よくWebの変化は早いと言いますが、はじめて実感の機会でした。

万屋物産は映像制作会社ですが、Web系の正社員を募集しています。cssをネストで書けるのは常識だしWebGLも余裕で3Dもグリグリだぜの方からの応募を心よりお待ちしています(教えて下さい)。