【css】カスタムプロパティー cssにも変数があるのよ

久々にブログ更新します。
今回は、cssのカスタムプロパティーについて

僕今日の今日までcssの変数的なやつってsassにしかないと思っていました。
結論、cssにもありました。笑

カスタムプロパティーとは

タイトルの通り、cssのプロパティーを変数に入れて使い回すことができる記法のことです。
css変数やカスケード変数と呼ばれることもあります。

方法

:root{ }という擬似変数を設定します。
propに変数名,valに使い回すための値を追加します。

:root{
  prop: val ;
}

あとは使用したいプロパティーの値の部分にvar(prop)と入力すれば完了です。

h1 {
  color: var(prop);
}

言葉では僕もよく理解できなかったので、
下記のコードをとりあえずはっつけてみてください。

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>

<style>
:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
  height: 70px;
}
</style>

:rootに茶色のプロパティーを設定し、--main-bg-colorという名前をつけます。
そうすると各要素で、var(--main-bg-color)と書かれた部分に設定した値が入ります。

javascriptでカスタムプロパティーを取得

jsでも使えます。

document.documentElement.style.setProperty('--primary-color', 'green');

このように.style.setPropertyを用いることで
普通のプロパティーと同じように記述することが可能です。

サイトでよく使われる色やサイズを使いまわせるだけでなく
意味的な識別ができるので可読性が上がりますね！